纯 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

您可以使用addEventListener：

var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++)
  (function (e) {
    trs[e].addEventListener("click", function () {
      console.log(this);
    }, false);
  })(i);

<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>

在这里，this是一个HTMLElement对象。记录的项目将是其<tr>本身。

<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>

如果您希望它像包含您的格式的对象一样，那么您需要执行以下操作：

<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>

var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++)
  (function (e) {
    trs[e].addEventListener("click", function () {
      console.log({
        "FirstName": this.querySelectorAll("*")[0].innerHTML.trim(),
        "LastName": this.querySelectorAll("*")[1].innerHTML.trim(),
        "Age": this.querySelectorAll("*")[2].innerHTML.trim()
      });
    }, false);
  })(i);

当您单击该行时，您将获得如下对象：

{
  "FirstName": "Jill",
  "LastName": "Smith",
  "Age": "50"
}

这里我假设<th>为对象键。

Answer 2

这里有趣的部分是通过不对键/列进行硬编码来使其通用。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>