Question

我目前正在尝试使用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，因为我正在学习这个项目。

Answer 1

一方面注意，但它太大而无法发表评论，并且有代码。

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);
}

Answer 2

您是否将方法设置为onLoad属性？

应该是：

...
<body onLoad="createMainTable()"></body>
...

或者您尝试将代码直接放在<script></script>

中的<div id="table-scroll-schedular">

应该是：

<div id="table-scroll-schedular">
    <script type="text/javascript">
        //paste your code at here without function declaration
    </script>
</div>

Answer 3

我实际上在我的javascript中使用了int而不是let来导致错误。

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

用修复我的问题替换int。不管怎样，谢谢！

用于创建HTML表的JavaScript

3 个答案: