0

我有 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

9 回答 9

4

如果我们正在处理较短的月份（例如，在 4 月，表格将不会显示 2013 年 4 月 31 日），这是一个也可以打破循环的解决方案：

$(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 作为第一个选项（仅在 backets 中使用 jQuery），这就是为什么我将代码留在纯 js 中（DOM 就绪包装器除外）。如果您想要一个完全独立于 jQuery 的解决方案，请按照此 SO post 中的说明绑定 DOM 内容加载事件

于 2013-03-04T09:08:22.443 回答
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);
                }
于 2013-03-03T14:06:59.557 回答
1

我想你的问题与这个问题有关。
换句话说，您正在寻找一个 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 行，具体取决于当月的天数。

于 2013-03-03T21:07:21.830 回答
0

试试这个：- http://jsfiddle.net/adiioo7/9fQxq/

采用

table.appendChild(row);

代替

table.tBodies[0].appendChild(row);
于 2013-03-03T14:06:19.480 回答
0

这是一个工作 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">&nbsp</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 函数将使用超出范围的日期自动更新日期月份（然后您不必关心闰年）

于 2013-03-05T09:25:36.163 回答
0

如果我正确理解了您的问题，而不是将第一列与当月的日期绑定？小提琴

$(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);
    }
});
于 2013-03-07T16:47:12.187 回答
0

您的问题不是很清楚.. 但是从您的代码中，我了解到您正在创建表 16 行，其中第 1 列的日期为(CURRENT_DATE - 1)to (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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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/

于 2013-03-07T17:58:14.097 回答
0

你可以试试这个：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一些默认文本。

我想出了这个：小提琴

于 2013-03-08T06:19:14.183 回答
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);
     }
 });
于 2013-03-08T18:27:29.187 回答