时间戳

首页 > 解决方案 > JavaScript 创建 HTML 表格

javascript - JavaScript 创建 HTML 表格

问题描述

我目前正在尝试使用 JavaScript 使用其他两个创建的表中的元素数量创建一个表。到目前为止，这是我正在尝试做的事情：

HTML：

<!-- Scrollable y-axis line of days above the scheduler -->
  <div id="table-wrapper-days">
    <div id="table-scroll-days">
      <table id="dayRow">
        <tr>
          <td>Monday 5/7</td>
          <td>Tuesday 5/8</td>
          <td>Wednesday 5/9</td>
          <td>Thursday 5/10</td>
          <td>Friday 5/11</td>
          <td>Saturday 5/12</td>
          <td>Sunday 5/13</td>
          <td>Monday 5/14</td>
          <td>Tuesday 5/15</td>
          <td>Wednesday 5/16</td>
          <td>Thursday 5/17</td>
          <td>Friday 5/18</td>
          <td>Saturday 5/19</td>
          <td>Sunday 5/20</td>
          <td>Monday 5/21</td>
          <td>Tuesday 5/22</td>
          <td>Wednesday 5/23</td>
          <td>Thursday 5/24</td>
          <td>Friday 5/25</td>
          <td>Saturday 5/26</td>
          <td>Sunday 5/27</td>
          <td>Monday 5/28</td>
          <td>Tuesday 5/29</td>
          <td>Wednesday 5/30</td>
          <td>Thursday 5/31</td>
          <td>Friday 6/1</td>
          <td>Saturday 6/2</td>
          <td>Sunday 6/3</td>
        </tr>
      </table>
    </div>
  </div>

  <!-- Scrollable x-axis column of employees to the left of the scheduler -->
  <div id="table-wrapper-employees">
    <div id="table-scroll-employees">
      <table id="employeeCol", class="tableEmployees">
        <tr><td>Employee A</td></tr>
        <tr><td>Employee B</td></tr>
        <tr><td>Employee C</td></tr>
        <tr><td>Employee D</td></tr>
        <tr><td>Employee E</td></tr>
        <tr><td>Employee F</td></tr>
        <tr><td>Employee G</td></tr>
        <tr><td>Employee H</td></tr>
        <tr><td>Employee I</td></tr>
        <tr><td>Employee J</td></tr>
        <tr><td>Employee K</td></tr>
        <tr><td>Employee L</td></tr>
        <tr><td>Employee M</td></tr>
        <tr><td>Employee N</td></tr>
        <tr><td>Employee O</td></tr>
        <tr><td>Employee P</td></tr>
        <tr><td>Employee Q</td></tr>
        <tr><td>Employee R</td></tr>
        <tr><td>Employee S</td></tr>
        <tr><td>Employee T</td></tr>
        <tr><td>Employee U</td></tr>
        <tr><td>Employee V</td></tr>
        <tr><td>Employee W</td></tr>
        <tr><td>Employee X</td></tr>
        <tr><td>Employee Y</td></tr>
        <tr><td>Employee Z</td></tr>
    </table>
  </div>
</div>

  <!-- Main body table to house the task graphics -->
  <div id="table-wrapper-scheduler">
    <div id="table-scroll-schedular">
      <script>createMainTable()</script>
    </div>
  </div>

JS：

function createMainTable() {
  var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
  var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;

  var drawTable += '<table class="tableTasks">';
  for (int i = 0; i < rows; i++) {
    drawTable += '<tr>';
    for(int j = 0; j < cols; j++) {
      drawTable += '<td>Task</td>';
    }
    drawTable += '</tr>';
  }
  drawTable += '</table>';

  document.write(drawTable);
}

问题是，当我运行它时，什么都没有显示。我正在尝试使用 JavaScript 创建一个网格表，该表稍后将用作调度程序。很抱歉，此时出于测试目的，所有内容都被硬编码。随着这个项目的进行，我正在学习 HTML。

标签： javascripthtmlhtml-tablegrid-layout

解决方案

一个旁注，但它太大而无法评论并且它有代码。

document.write应该避免，当你调用它时，它会清除页面，因为它调用open，在JS中创建表，你可以使用这段代码，我认为是最短的。

var div = document.createElement('div');
div.innerHTML = drawTable;
document.body.appendChild(div);

较长的代码需要调用并createElement为您的表创建树状结构，如下所示：<tr><td>

  var rows = 10, cols = 10;
  var table = document.createElement('table');
  table.className = 'tableTasks';
  for (var i = 0; i < rows; i++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    for(var j = 0; j < cols; j++) {
      var td = document.createElement('td');
      td.innerHTML = 'Task';
      tr.appendChild(td);
    }
  }
  document.body.appendChild(table);

代码中的错误：

function createMainTable() {
  var rows = document.getElementById('dayRow').getElementsByTagName("td").length;
  var cols = document.getElementById('employeeCol').getElementsByTagName("tr").length;

  // var drawTable += '<table class="tableTasks">';
  // it should be this, because your create variable so it don't exist before
  var drawTable = '<table class="tableTasks">';
  // for (int i = 0; i < rows; i++) {
  // in JS you need to use var not int like in java
  for (var i = 0; i < rows; i++) {
    drawTable += '<tr>';
    for(int j = 0; j < cols; j++) {
      drawTable += '<td>Task</td>';
    }
    drawTable += '</tr>';
  }
  drawTable += '</table>';
  // this will remove your other tables.
  document.write(drawTable);
}

推荐阅读