将日期时间javascript绑定到表列
Bind datetime javascript to table column
我有一个包含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>
这里有一个解决方案，在我们处理较短月份的情况下也可以打破循环（例如，在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);
}
});
链接到jsfiddle
注意：OP提到javascript作为第一个选项（jQuery仅在backets中），这就是为什么我将代码保留在纯js中（DOM就绪包装器除外）。如果您想要一个完全独立于jQuery的解决方案，请按照本SO post 中所述绑定DOM内容加载事件
我想你的问题与这个问题有关
换句话说，您正在寻找一个Javascript函数，它应该为当前月份的每一天向空表添加一行；每行应有四列，分别命名为"日期"、"开始时间"、"结束时间"answers"小时类型"，第一列（"日期"）应包含一个文本输入，日期格式为"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行
您正试图追加到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);
}
试试这个：-http://jsfiddle.net/adiioo7/9fQxq/
使用
table.appendChild(row);
而不是
table.tBodies[0].appendChild(row);
这是一个正在工作的jsFiddle。
我会使用的方式：
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函数将自动更新日期月与超出范围的日期（然后您不必关心闰年）
如果我正确理解了你的问题，你想将第一列与当月的日期绑定吗？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);
}
});
你的问题不是很清楚。。但从您的代码中，我了解到您正在创建表16行，其中第1列的日期为(CURRENT_DATE - 1)到(CURRENT_DATE+14)。
我使用模板来渲染表行。根据需要更新模板以渲染其他列。
演示：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/
您可以试用此功能：FIDDLE
<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。
我想出了这个：FIDDLE
$(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);
}
});
相关文章：
- 对象文字方法上的Javascript绑定不起作用
- 视窗 8/Metro UI 数据绑定 JavaScript
- 是否可以绑定javascript函数，使其本地上下文与“this”相同
- 绑定 JavaScript:内联或外部(或脚本）
- 在MVC 4.0中绑定javascript文件
- 如何使用Knockout绑定javascript对话框
- 如何使用angular js在html元素中绑定javascript和ng-click事件
- 如何使用asp.net C#在页面加载时绑定JavaScript事件
- 正在清除WinJS绑定JavaScript数组
- 绑定JavaScript课程未捕获语法错误:意外的令牌<
- 访问嵌套事件绑定javascript中的对象
- 元素在 ajax 显示时不能绑定 Javascript 事件
- 动态绑定javascript与GridView按钮
- 绑定JavaScript's oninput事件的最佳jQuery插件实现
- 实时数据绑定JavaScript
- 为什么我要取消绑定Javascript事件?
- Android绑定JavaScript代码到Android代码不工作
- 如何在ClojureScript中绑定Javascript承诺的解析值
- 绑定javascript滑动和onclick事件到iframe，其中有pdf文档
- 使用knockout.js来跨列绑定javascript关联数组
