我有一个包含31行和4个表列的html表我正在尝试编写javascript（Jquery）来绑定第一列和当前月份的日期。
这是我的代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
var table = document.getElementById("myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1)
for (var i = 0; i < 16; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear();
myDate.setDate(myDate.getDate() + 1)
row.appendChild(cell);
table.tBodies[0].appendChild(row);
}
});
</script>
</head>
<body>
<table id="myTable"></table>
</body>
</html>
答案 0 :(得分：4)
这是一个解决方案，如果我们处理较短的月份（例如4月份，表格不显示31/4/2013），也会打破循环：
$(function() {
var table = document.getElementById("myTable")
var myDate = new Date();
var month = myDate.getMonth() + 1;
var firstOfMonth = new Date();
firstOfMonth.setDate(1);
for (var i = 0; i < 31; i++) {
myDate.setDate(firstOfMonth.getDate() + i);
if (myDate.getMonth() + 1 != month) break;
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerText = formatDate(myDate, dateFormat);
row.appendChild(cell);
table.tBodies[0].appendChild(row);
}
});
注意：OP提到javascript作为第一个选项（仅在backets中使用jQuery），这就是我将代码保留在普通js中的原因（除了DOM ready包装器）。 如果您想要一个完全独立于jQuery的解决方案，请按照in this SO post所述绑定DOM内容加载事件
答案 1 :(得分：1)
您正在尝试附加到tbody，但您没有定义一个。将HTML更改为
<table id="myTable"><tbody></tbody></table>
如果您已经有行和单元格，则只需要添加新单元格
for (var i = 0; i < 16; i++) {
var cell = document.createElement("td");
cell.innerText = myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear();
myDate.setDate(myDate.getDate() + 1)
$(table).find('tr').eq(i).prepend(cell);
}
答案 2 :(得分：1)
我认为您的问题与this question有关
换句话说，您正在寻找一个Javascript函数，该函数应该在当前月份的每一天向空表添加一行;每行应有四列名为“日期”，“开始时间”，“结束时间”和“小时类型”，第一列（“日期”）应包含文本输入，日期格式为“dd / mm / YYYY”。
如果是这样，这是我的解决方案：
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
// See https://stackoverflow.com/questions/4881938/javascript-calculate-number-of-days-in-month-for-a-given-year
Date.prototype.daysInMonth = function(year, month) {
var monthStart = new Date(year, month, 1);
var monthEnd = new Date(year, month + 1, 1);
var monthLength = Math.round((monthEnd - monthStart) / (1000 * 60 * 60 * 24));
var mm = ((month + 1) < 10) ? ('0' + (month + 1)) : (month + 1);
var ret = new Array();
for (var i = 1; i <= monthLength; i++) {
var dd = (i < 10) ? ('0' + i) : i;
ret.push(dd + '/' + mm + '/' + year);
}
return ret;
};
function addRows(table, dates) {
var idx = 1;
for (var i in dates) {
table.append('<tr>'+
'<td><input name="date'+idx+'" id="date'+idx+'" class="date" value="'+dates[i]+'"></td>'+
'<td><input name="startTime'+idx+'" id="startTime'+idx+'"></td>'+
'<td><input name="endTime'+idx+'" id="EndTime'+idx+'"></td>'+
'<td>'+
'<select name="hourType'+idx+'" id="hourType'+idx+'">'+
'<option value="">Please select</option>'+
'<option value="1">Regular</option>'+
'<option value="2">Overtime</option>'+
'</select>'+
'</td>'+
'</tr>');
idx++;
}
}
$(function() {
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth();
var dates = myDate.daysInMonth(year, month);
var table = $("#myTable").find("tbody");
addRows(table, dates);
});
</script>
</head>
<body>
<form>
<table id="myTable">
<thead>
<tr>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Hour Type</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>
显然，该表也可能少于31行，具体取决于当月的天数。
答案 3 :(得分：0)
试试这个： - http://jsfiddle.net/adiioo7/9fQxq/
使用
table.appendChild(row);
而不是
table.tBodies[0].appendChild(row);
答案 4 :(得分：0)
我会用的方式：
var d = new Date(); // get current date
var currentMonth = d.getMonth(); // save current month
d.setDate(1); // set date to first day of current month
// (...) create your table header
// create 31 rows
for(var i=1; i<=31; i++) {
var line = $(document.createElement('tr'));
if(d.getMonth() == currentMonth) {
// add the date to the first column
line.append('<td>'+dateToDMY(d)+'</td>')
.append('<td></td>')
.append('<td></td>')
.append('<td></td>');
} else {
// in case you always want to have 31 rows, whatever the month
line.append('<td colspan="4" class="empty"> </td>');
}
$('#myTable').append(line); // append the line to the table
d.setDate(d.getDate() + 1); // increase the date
}
/*
* Format Date : dd/mm/yyyy
* Based on Adrian Maire work
* http://stackoverflow.com/a/10685571/1238019
*/
function dateToDMY(date) {
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getFullYear();
return '' + (d <= 9 ? '0' + d : d) + '/' + (m<=9 ? '0' + m : m) + '/' + y;
}
请注意，使用setDate function会自动更新日期月份超出范围的日期（那么您不必关心闰年）
答案 5 :(得分：0)
如果我正确理解您的问题，那么您希望将第一列与当月的日期绑定在一起？ Fiddle
$(document).ready(function () {
// Get today date
var d = new Date();
//Get Days of Month
var n = new Date(d.getYear(), d.getMonth()+1, 0).getDate();
//Run loop for number of days
for (var i = 1; i <= n; i++) {
//Create row data
var row = '<tr><td>'+ i + "/" + (d.getMonth() + 1) + "/" + d.getFullYear()+'</td><td><td/><td><td/><td><td/></tr>';
// Append row data to table
$('#myTable').append(row);
}
});
答案 6 :(得分：0)
您的问题不是很清楚..但是从您的代码中我理解的是您创建了表格16行，其中第1列的日期从(CURRENT_DATE - 1)到(CURRENT_DATE+14)。
我使用模板来渲染表格行。根据需要更新模板以呈现其他列。
DEMO： http://jsfiddle.net/nLQ7q/3/
$(document).ready(function ($) {
var table = $("#myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
var rowTmpl = '<tr><td>{DATE}</td><td> </td><td> </td><td> </td></tr>';
var rows = [];
for (var i = 0; i < 16; i++) {
var row = rowTmpl.replace('{DATE}', myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getYear());
myDate.setDate(myDate.getDate() + 1)
rows.push(row);
}
table.html(rows.join(''));
});
这里有一个花哨的版本，带有日期选择器http://jsfiddle.net/nLQ7q/4/
答案 7 :(得分：0)
<table id="myTable"></table>
请注意，你的标记中没有tbody，所以我把它放在下面用jquery
-JQUERY- jQuery(document).ready(function ($) {
var table = $("#myTable");
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1)
for (var i = 0; i < 16; i++) {
var row = $("<tr>");
var cell = $("<td>");
myDate.setDate(myDate.getDate() + 1)
cell.text(myDate.getDate() + "/" + (myDate.getMonth() + 1) + "/" + myDate.getFullYear());
row.append(cell);
table.find('tbody').append(row);
}
$('#myTable').find('tr').each(function (i, v) {
$(this).append('<td/><td/><td/>');
$('td:not(:first)', this).text(i + 1);
});
});
每个row in the tr填充first td日期和created other tds一些默认文字。
答案 8 :(得分：0)
$(function ($) {
var table = $("#myTable")
var myDate = new Date();
myDate.setDate(myDate.getDate() - 1);
for (var i = 0; i < 16; i++)
{
var row = $('<tr/>');
var cell = $('<td/>');
cell.text
(myDate.getDate() +
"/" +
(myDate.getMonth() + 1) +
"/" +
(1900 + myDate.getYear()));
myDate.setDate(myDate.getDate() + 1);
row.append(cell);
table.append(row);
}
});