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：

＆＃13;

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

＆＃13;

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

＆＃13;

此处，this将是HTMLElement对象。记录的项目将是<tr>本身。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Answer 2

这里有趣的部分是通过不对键/列进行硬编码来使其成为通用的。这可以通过在构建对象时使用Get-ADGroup -SearchBase "ou=groups,ou=DOMAIN,dc=DOMAIN,dc=local" -Properties name,members -Filter * | select members, name | Export-Csv BLAH.CSV -NoTypeInformation元素文本作为键来完成：

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

单击时，纯JavaScript选择表行作为对象

2 个答案: