如何使用 javascript 扩展表数据？答案

【问题标题】：How to Extend table data using javascript?如何使用 javascript 扩展表数据？
【发布时间】：2020-04-23 16:35:54
【问题描述】：

我使用 HTML 制作了一个表格，并具有以下属性：

表头包含本月的日期，表示表头的函数是head()。
名称数组中的每个名称都有表行。行的 id 是名称数组中名称的索引。

var date = new Date(),
  y = date.getFullYear(),
  m = date.getMonth();
var start = new Date(y, m, 2);
var end = new Date(y, m + 1, 1);
const names = ["JOHN", "MIKE", "SAM"]; // names array
head(start, end); // function for table head
tabledata(names); // funnction for table row 


//function to make table rows
function tabledata(names) {
var loop = new Date(start);
const table = document.getElementById("table");

names.forEach((item, index) => {
  const tr = document.createElement("tr");
  tr.id = index;
  const td1 = document.createElement("td");
  const name = document.createTextNode(item);
  td1.appendChild(name);
  tr.appendChild(td1);
  table.appendChild(tr);
  //I think you can add code here
  
});
}

//function to produce date of this month in th
function head(start, end) {
  var loop = new Date(start);
  while (loop <= end) {
    var th = document.createElement("th");
    var dates = [];
    dates.push(loop.toISOString().split("T")[0]);
    var node = document.createTextNode(dates);
    th.appendChild(node);
    var element = document.getElementById("t-head");
    element.appendChild(th);
    var newDate = loop.setDate(loop.getDate() + 1);
    loop = new Date(newDate);
  }
}

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
}

table, th, td {
  border: solid 1px #000;
  padding: 10px;
}

table {
    border-collapse:collapse;
    caption-side:bottom;
}

caption {
  font-size: 16px;
  font-weight: bold;
  padding-top: 5px;
}

<table>
	
	<thead>
      <tr id="t-head">
        <th>Names</th>
      </tr>
  </thead>
  <tbody id = table>
     
  </tbody>
  <caption>Leave Report This Month</caption>
</table>

我想进一步扩展表格以具有以下附加功能，但我无法弄清楚如何：-

将每一行扩展到最后一列。一对应一。

请看sn-ps中的tabledata()函数。

【问题讨论】：

是的，你绝对可以在你写的地方添加代码 //我认为你可以在这里添加代码。目前尚不清楚您想要多少列。你知道吗？只需向每个 tr 添加更多的 td 元素即可。
@Yishmeray 我的意思是循环到该月的最后一天，即等于 th 的数量
好的，继续。循环，直到您到达该月的最后一天。创建很多条目。现在在你的 head 函数中，你正在创建一个 th。多做一些。你可以在那里循环。

标签： javascript html loops html-table

【解决方案1】：

var date = new Date(),
  y = date.getFullYear(),
  m = date.getMonth();
var start = new Date(y, m, 2);
var end = new Date(y, m + 1, 1);
const names = ["JOHN", "MIKE", "SAM"]; // names array
const leaves = ["2020-04-01", "2020-04-05", "2020-04-08"];
head(start, end); // function for table head
tabledata(start, end, names, leaves); // funnction for table row 


//function to make table rows
function tabledata(start, end, names, leaves) {
  var loop = new Date(start);
  const table = document.getElementById("table");

  names.forEach((item, index) => {
    const tr = document.createElement("tr");
    tr.id = index;
    const td1 = document.createElement("td");
    const name = document.createTextNode(item);
    td1.appendChild(name);
    tr.appendChild(td1);
    table.appendChild(tr);
    //I think you can add code here
    var loop = new Date(start);
    while (loop <= end) {
      var dates = [];
      dates.push(loop.toISOString().split("T")[0]);
      
      var td = document.createElement("td");
     // var node = document.createTextNode(dates);
     // td.appendChild(node);
      var element = document.getElementById(index); //
      element.appendChild(td);
      if(leaves.indexOf(dates) !== -1){
      td.style.cssText = 'background-color: green';

    } else{
      td.style.cssText = 'background-color: red';
    }
      
      var newDate = loop.setDate(loop.getDate() + 1);
      loop = new Date(newDate);
      
    }

  });
}

//function to produce date of this month in th
function head(start, end) {
  var loop = new Date(start);
  while (loop <= end) {
    var th = document.createElement("th");
    var dates = [];
    dates.push(loop.toISOString().split("T")[0]);
    var node = document.createTextNode(dates);
    th.appendChild(node);
    var element = document.getElementById("t-head");
    element.appendChild(th);
    var newDate = loop.setDate(loop.getDate() + 1);
    loop = new Date(newDate);
  }
}

body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
}

table, th, td {
  border: solid 1px #000;
  padding: 10px;
}

table {
    border-collapse:collapse;
    caption-side:bottom;
}

caption {
  font-size: 16px;
  font-weight: bold;
  padding-top: 5px;
}

<table>
	
	<thead>
      <tr id="t-head">
        <th>Names</th>
      </tr>
  </thead>
  <tbody id = table>
     
  </tbody>
  <caption>Leave Report This Month</caption>
</table>

【讨论】：