如何使用javascript扩展表格数据?

我使用HTML制作了一个表格,并带有以下属性。

  • 表头包含本月的日期,表示表头的函数是head()。
  • 在names数组中,每个名字都有表行。行的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>

我想进一步扩展该表,使其具有以下附加功能,但我无法弄清如何:-。

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

请看片段中的tabledata()函数。

解决方案:

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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

缓存JNI对象和线程安全(在Android系统中

2022-9-9 0:22:40

未分类

PSET 4 恢复分区故障 CS50

2022-9-9 0:22:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索