HTML Table onClick 函数获取表格行键和值答案

【问题标题】：HTML Table onClick function to get table row key and valueHTML Table onClick 函数获取表格行键和值
【发布时间】：2017-06-02 12:00:24
【问题描述】：

我想创建一个带有 onclick 函数的 HTML 表来获取行的键和值，到目前为止 onclick 函数正在工作，但它为我显示和空数组，我该如何解决这个问题。谢谢。

当你点击第一行时，我希望它以这种格式显示在控制台日志中：

{ "name":"Clark", "age":29};

这是我的代码

var table = document.getElementById("tableID");
if (table != null) {
  for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      tableText(this);
    };
  }
}

function tableText(tableRow) {
  var myJSON = JSON.stringify(tableRow);
  console.log(myJSON);
}

<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
    <tr>
        <th hidden="hidden"></th>
        <th>name</th>
        <th>age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td >Clark</td>
        <td>29</td>
    </tr>
    <tr>
        <td >Bruce</td>
        <td>30</td>
    </tr>
</tbody>
</table>

【问题讨论】：

您正在将一个 DOM 元素（即主机对象）传递给 JSON.stringify，您确定这应该有效吗？见How to serialize DOM node to JSON even if there are circular references?。
嗨@RobG 谢谢你的回复，我想我走错了方向。我的目标是在单击时获取整个行对象，以便稍后将其传递以编辑 REST API 框架。现在我只想获取 JSON 格式的对象。你能帮我吗？谢谢
TR 的字符串化（序列化）版本将是它的outerHTML，它可以作为字符串传递，然后使用 HTML 解析器解析回 DOM 对象。在这种情况下，我认为 JSON 是错误的工具。
我明白了，有什么建议吗？
根据第一条评论，您可以手动序列化元素，但这似乎有点极端。所以要么只序列化你想要的位，要么使用outerHTML。也许您应该解释“行的键和值”是什么意思，例如点击一行会产生什么（样本输出）？

标签： javascript html

【解决方案1】：

我编辑了答案以将数据作为对象返回。运行脚本看看。

var table = document.getElementById("tableID");
if (table) {
  for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      tableText(this);
    };
  }
}

function tableText(tableRow) {
  var name = tableRow.childNodes[1].innerHTML;
  var age = tableRow.childNodes[3].innerHTML;
  var obj = {'name': name, 'age': age};
  console.log(obj);
}

<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
    <tr>
        <th hidden="hidden"></th>
        <th>name</th>
        <th>age</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td >Clark</td>
        <td>29</td>
    </tr>
    <tr>
        <td >Bruce</td>
        <td>30</td>
    </tr>
</tbody>
</table>

【讨论】：

很遗憾这不起作用，请再次参考问题，谢谢
@M.Izzat 现在看看
@JosanIracheta 非常感谢这项工作！如果你不介意我问，如果我有一张更大的桌子。如何通过不必声明 tableRow.childNodes[i].innerHTML 来使其更具动态性； 1 乘 1
@M.Izzat 既然你想要一个对象，你就必须明确声明你想要什么，这样值才能与正确的键配对。

【解决方案2】：

我认为你可以使用tr.innerTest来获取标签中的值

【讨论】：

我想你的意思是 innerText。在我看来，OP 想要序列化整个 TR 结构，而不仅仅是获取 textContent。

【解决方案3】：

如果你使用 jQuery，你可以像这样向表中添加事件监听器

$('#tableID').on('click', 'tr', function(e){
  tableText($(this).html());
});

function tableText(tableRow) {
  var myJSON = JSON.stringify(tableRow);
  console.log(myJSON);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table align="center" id="tableID" border="1" style="cursor: pointer;">
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
  <tr>
    <td>Text</td>
    <td>MoreText</td>
    <td>Lorem</td>
    <td>Ipsum</td>
  </tr>
</table>

【讨论】：

【解决方案4】：

有很多方法可以做你想做的事，但是一个健壮且可扩展的方法是从表头行中获取属性名称，然后从被点击的行中获取值。

我不知道为什么您在标题中隐藏了单元格，这只会使事情复杂化。如果您将它用于数据，那么在关联对象或表或行的data-* 属性中会更好。

function getRowDetails(event) {
  row = this;
  var table = row.parentNode.parentNode;
  var header = table.rows[0];
  
  // Get property names from header cells
  var props = [].reduce.call(header.cells, function(acc, cell ) {
    if (!cell.hasAttribute('hidden')) {
      acc.push(cell.textContent);
    }
    return acc;
  }, []);
  
  // Get value for each prop from data cell clicked on
  var result = props.reduce(function(acc, prop, i) {
    acc[prop] = row.cells[i].textContent;
    return acc;
  }, {});
  
  // Do something with result
  console.log(result);
  return result;
}

// Add listener to body rows, could also put single listener on table
// and use event.target to find row
window.onload = function() {
  [].forEach.call(document.getElementsByTagName('tr'), function(row, i) {
    if (i) row.addEventListener('click', getRowDetails, false);
  });
}

<table align="center" id="tableID" border="1">
<thead>
  <tr><th hidden="hidden"></th><th>name</th><th>age</th></tr>
</thead>
<tbody style="cursor: pointer;">
  <tr><td >Clark</td><td>29</td></tr>
  <tr><td >Bruce</td><td>30</td></tr>
</tbody>
</table>

【讨论】：