如何在单个语句中应用多个索引

问题描述

我正在处理动态表，其中 javascript 读取表然后分别响应表的列。我希望在 col 语句中使用 row 例如 col = x[i].rows[row].cells.length;相反。

function add() {
  var x,y,z,i,j,row,col;
  x = document.querySelectorAll(".tab");

  for (i = 0; i < x.length; i++) {
    y = x[i].insertRow();

    row = parseInt(x[i].rows.length);
    col = x[i].rows[1].cells.length; //should get the length of last row of the table
    for (j = 0; j < col; j++) {
      if (j == 0) {
        y.insertCell(j).innerHTML = "<input type='checkBox'>";
      } else {
        y.insertCell(j).innerHTML = row;
      }
    }
  }
}

<table border=1 class="tab">
  <tr>
    <td colspan=3>Table 1</td>
  </tr>
  <tr>
    <td><input type="checkBox"></td>
    <td>c1</td>
    <td>c2</td>
  </tr>
</table><br>
<table border=1 class="tab">
  <tr>
    <td colspan=3>Table 2</td>
  </tr>
  <tr>
    <td><input type="checkBox"></td>
    <td>c1</td>
    <td>c2</td>
  </tr>
</table>
<button onclick="add()">add</button>

解决方法

您应该使用各自的分组标签将标题 <tr> 和正文 <tr> 分开。然后你可以通过使用这样的 <tr> 来单独在 body 中获取 x[i].tBodies[0].rows.length。示例只有一个 tbody 标签，因此直接读取 0 索引。

function add() {
  var x,y,z,i,j,row,col;
  x = document.querySelectorAll(".tab");

  for (i = 0; i < x.length; i++) {
    y = x[i].insertRow();

    row = x[i].tBodies[0].rows.length;
    col = x[i].rows[row - 1].cells.length; //should get the length of last row of the table
    for (j = 0; j < col; j++) {
      if (j == 0) {
        y.insertCell(j).innerHTML = "<input type='checkbox'>";
      } else {
        y.insertCell(j).innerHTML = row;
      }
    }
  }
}

<table border=1 class="tab">
  <thead>
    <tr>
      <td colspan=3>Table 1</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>c1</td>
      <td>c2</td>
    </tr>
  </tbody>
</table>
<button onclick="add()">add</button>