Как расширить данные таблицы, используя javascript? - PullRequest
Новая
       8

Как расширить данные таблицы, используя javascript?

0 голосов
/ 23 апреля 2020

Я создал таблицу с использованием HTML и со следующими атрибутами:

  • Заголовок таблицы содержит дату этого месяца, функция для представления заголовка таблицы - head ().
  • Есть строки таблицы для каждого имени в массиве имен. Идентификатор строки - это индекс имени в массиве имен. 

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 () во фрагментах.

1 Ответ

0 голосов
/ 24 апреля 2020 

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>
...