javascript - 纯 JavaScript 在单击时选择表格行作为对象

Question

我有一个如下表，当单击行单元格时，我需要选择该行并使用纯 JavaScript 转换为 JavaScript 对象。

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 1

这里有趣的部分是通过不对键/列进行硬编码来使其通用。这可以通过在构建对象时使用第 th 元素文本作为键来完成:

[].slice.call(document.querySelectorAll("#auditors tr"), 1).forEach(function(row){
      row.addEventListener("click", function(){
           var ths = document.querySelectorAll("#auditors th");
           var obj = [].reduce.call(ths, function(obj, th, i){
               obj[th.textContent] = row.cells[i].textContent;
               return obj;
           }, {});
           console.log(obj);
      });
});

<table id="auditors">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>