使用 JavaScript 在 table 标签内添加数组（计划）

Question

我对JavaScript真的很陌生，所以对于任何误解，我深表歉意。我有一些数组，但我不知道如何按照我想要的顺序将它们放在 table 中。

我希望第一列填上白天的时间，每隔一列填上星期几。第二列始终需要是当天，其他单元格需要为空。这是到目前为止的代码：

function GetDates(startDate, daysToAdd) {
    var aryDates = [];

    for (var i = 0; i <= daysToAdd; i++) {
        var currentDate = new Date();
        currentDate.setDate(startDate.getDate() + i);
        aryDates.push(DayAsString(currentDate.getDay()) + ", " + currentDate.getDate() + " " + MonthAsString(currentDate.getMonth()) + " " + currentDate.getFullYear());
    }

    return aryDates;
}

function MonthAsString(monthIndex) {
    var d = new Date();
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    return month[monthIndex];
}

function DayAsString(dayIndex) {
    var weekdays = new Array(6);
    weekdays[0] = "Sunday";
    weekdays[1] = "Monday";
    weekdays[2] = "Tuesday";
    weekdays[3] = "Wednesday";
    weekdays[4] = "Thursday";
    weekdays[5] = "Friday";
    weekdays[6] = "Saturday";

    return weekdays[dayIndex];
}

var dayHours = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', ]
var startDate = new Date();
var aryDates = GetDates(startDate, 7);

$('#example').html(aryDates);

Answer 1

您可以直接在 JavaScript 中创建所需的 HTML 元素，因为没有这方面的例程。

在 循环的开头 你创建了一个 table 行，如下所示：

var $tr = $('<tr></tr>');

然后将单元格添加到类似于此的行：

var $td = $('<td>' + value + '</td>')
$tr.append($td);

您必须为要显示的每一列执行此操作 –（只需将 value 替换为您想要的值）。因此，您创建了一个新单元格，将其附加到 table 行 $tr。在该循环的末尾，您将此 $tr 附加到您的 table.

$('#example').append($tr);

假设您的 table 有 id 示例。

实现图片中的效果：

首先： 创建 Table 行，循环创建 Table 单元格的日期，追加到 Table 行，追加到Table

var $tr = $('<tr></tr>');
$tr.append($('<td>hours</td>'));
aryDates.forEach(function(date) {
  var $td = $('<td>' + date + '</td>');
  $tr.append($td);
});
$('#example').append($tr);

第二个： 循环数小时，创建 td，将其附加到 tr，然后在该循环内，创建另一个包含所需空单元格数的循环，并始终附加一个将 td 空到 table 行，毕竟你将它附加到 table

dayHours.forEach(function(hour) {
  var $tr = $('<tr></tr>');
  var $td = $('<td>' + hour + '</td>');
  $tr.append($td);
  for(var i = 0; i < aryDates.length; i++) {
    $tr.append('<td></td>');
  } 
  $('#example').append($tr);
});

可以帮助您的类似问题是：

insert elements from array to table in jquery/js

或者，您可以查看像 Angular 或 React.js 这样的框架，它们会自动更新 DOM.

使用 JavaScript 在 table 标签内添加数组（计划）

Adding Arrays inside a table tag with JavaScript (schedule)

javascript

jquery

schedule

date