Question

我正在尝试从今天开始创建一个包含30天日期的表格。

现在我有这个工作，但它以字符串形式返回。

我想添加一个<td>，每个日期都会返回到我的表格中。

我的代码就是这个

HTML

<table>
<tbody>
    <tr>
        <td></td> <!-- Add Each Date here -->
    </tr>

</tbody>
</table>

JS

var date = moment(),
    begin = moment(date).startOf('week').isoWeekday(1);

var str = "";
for (var i=0; i<30; i++) {
    str += begin.format("MMM Do") + '<br>';
    begin.add('days', 1);
}

// Would like to add date to each <td> and add <td> to the table
document.body.innerHTML = str;

DEMO

Answer 1

这应该有效：

for (var i=0; i<30; i++) {
    $("table tr").append("<td>" + begin.format("MMM Do") + "</td>");
    begin.add('days', 1);
}

Answer 2

尽量不要每次都附加到DOM，它会让它变得更慢，效率更低，特别是如果你有太多要追加的项目。而是将它们添加起来并追加到最后。

var str = "", $tds= [];
for (var i=0; i<30; i++) {
    $tds.push('<td>' + begin.format("MMM Do") + '</td>'); //push the tds to the temp array
    begin.add('days', 1);
}

// Would like to add date to each <td> and add <td> to the table
$('table tr').append($tds); //append in the end

<强> Demo

Answer 3

你可以随时追加它们。像这样......

http://jsfiddle.net/jzKMS/

for (var i=0; i<30; i++) {
    $('#dates tbody').append('<tr><td>' + begin.format("MMM Do") + '</td></tr>');
    begin.add('days', 1);
}

或者，为了更快地运行，首先构建元素并在结尾追加一次。

Answer 4

只需稍微添加现有代码，请参阅下文，

var date = moment(),
    begin = moment(date).startOf('week').isoWeekday(1);

var str = [];
for (var i=0; i<30; i++) {
    str.push('<td>' + begin.format("MMM Do") + '</td>');
    begin.add('days', 1);
}

$('#myTable tbody').append('<tr>' + str.join('') + '</tr>');

DEMO： http://jsfiddle.net/wzdr2/

动态添加到表中

4 个答案: