javascript - 从表 JS 中的输入获取元素 id

Question

我想获取ID(因为我不知道它是我得到的字符串还是元素)。我的 HTML 代码和 Javascript 如下所示:

var table = document.getElementById('workerTimes');
var emptyArray = new Array(100);

for (var r = 1, n = table.rows.length; r < n; r++) {
  var element = table.rows[r].cells[0].innerHTML;
  emptyArray.push(element.id);

  console.log(element);
}

<table class="table" id="workerTimes">
  <tbody>
    <tr>
      <th></th>
      <th>Osoba</th>
      <th>Rozpoczął pracę punktualnie</th>
      <th>Zakończył pracę punktualnie</th>
    </tr>
    <tr>
      <td><input type="checkbox" id="50"></td>
      <td>Jan</td>
      <td>
        <button type="button" class="button_positive" onclick="tickClick(50, 0, 0)">✓</button>
        <button type="button" class="button_negative" onclick="tickClick(50, 0, 1)">X</button>
      </td>
      <td>
        <button type="button" class="button_positive" onclick="tickClick(50, 1, 0)">✓</button>
        <button type="button" class="button_negative" onclick="tickClick(50, 1, 1)">X</button>
      </td>
    </tr>
  </tbody>
</table>

控制台日志显示

< input type="checkbox" id="50" >

但我无法获取该元素的 ID 并将其推送到数组。如何做到这一点？

Answer 1

您正在使用element.innerHTML，但这只是文本。您想要使用 element.children 或潜在的 element.childNodes 来处理结果以获得正确的 ID。

var table = document.getElementById('workerTimes');

var emptyArray = new Array(100);

for (var r = 1, n = table.rows.length; r < n; r++) {
  var element = table.rows[r].cells[0].children[0];
  emptyArray.push(element.id);

  console.log(element);
  console.log(element.id);
}

<table class="table" id="workerTimes">
  <tbody>
    <tr>
      <th></th>
      <th>Osoba</th>
      <th>Rozpoczął pracę punktualnie</th>
      <th>Zakończył pracę punktualnie</th>
    </tr>
    <tr>
      <td><input type="checkbox" id="50"></td>
      <td>Jan</td>
      <td>
        <button type="button" class="button_positive" onclick="tickClick(50, 0, 0)">✓</button>
        <button type="button" class="button_negative" onclick="tickClick(50, 0, 1)">X</button>
      </td>
      <td>
        <button type="button" class="button_positive" onclick="tickClick(50, 1, 0)">✓</button>
        <button type="button" class="button_negative" onclick="tickClick(50, 1, 1)">X</button>
      </td>
    </tr>
  </tbody>
</table>