Question

我是JavaScript的新手，所以我很抱歉提前有任何误解。我有一些数组，但我不知道如何按照我想要的顺序将它们放在一个表中。

我希望第一列填充日期，其他每一天填充星期几。第二列始终需要是当天，其他单元格必须为空。这是迄今为止的代码：

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元素，因为没有例程。

在循环的开头，您可以创建一个如下所示的表格行：

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

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

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

您必须为要显示的每个列执行此操作 - （只需将value替换为您想要的值）。因此，您创建一个新单元格，将其附加到表格行$tr。在该循环结束时，您将此$tr附加到您的表格中。

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

假设您的表具有id示例。

要实现图片中的内容：

首先：创建表格行，循环日期，在其中创建表格单元格，附加到表格行，附加到表格

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附加到该表行，毕竟你把它附加到表

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

Populate table from array using JQuery

或者您可以查看自动更新DOM的 Angular 或 React.js 等框架。

使用JavaScript（计划）在表标记中添加数组

1 个答案: