在 JavaScript 中的 HTML 表格行中构建一个由单元格的名称/值对组成的对象

Posted 2023-05-09

【中文标题】在 JavaScript 中的 HTML 表格行中构建一个由单元格的名称/值对组成的对象

【英文标题】：Build an object consisting of the name/value pairs of cells in an HTML table row in JavaScript

【发布时间】：2019-06-06 15:42:32

【问题描述】：

我是 JS 的新手，所以请耐心等待；我什至不确定我是否以正确的方式寻找答案，但经过数小时的谷歌搜索和修补后，我无法让它工作。

我有一个 html 表格，用户点击了一行。我可以像这样得到点击的元素：

var elem = document.elementFromPoint(e.clientX, e.clientY);

我也可以这样获取行：

var tr = elem.closest("tr");

现在我想从单元格中构建一个名称/值对数组，其中名称是数据字段名称，值是单元格的内部文本，所以我这样做：

var set = []; 

$.each(tr.cells, function(cell)  
    set.push(name : cell.dataset.field, value : cell.innerText); 
);

但是我收到了这个错误：

未捕获的类型错误：无法读取未定义的属性“字段” 在 HTMLTableCellElement。 (:1:80) 在 Function.each (jquery.min.js:2) 在:1:17

这是在 Chrome 开发工具控制台中的样子：

这是tr 上的手表，其中突出显示的部分显示了我正在寻找的field。

我很确定我可以在得到它之后将名称/值对数组转换为一个对象，例如JSON.parse() 什么的。

---

那么我的代码或方法有什么问题？有没有更简洁或更有效的方法来做我想做的事情？

【问题讨论】：

您也可以在这里发布您的 HTML 表格吗？我会尝试在本地复制它。

在循环中尝试console.log(cell) 和console.log(cell.dataset)...

【参考方案1】：

您只是缺少$.each() 所需的参数排序（索引是第一个参数，然后是元素）。因此，您只需将其更改为：

$.each(tr.cells, function(index, elem) 
  set.push(
    name: elem.dataset.field,
    value: elem.innerText
  );
);

【讨论】：

太棒了！那么为什么错误是抱怨错误的事情呢？

@rory.ap - 因为cell 在您的初始尝试中是一个整数（因为它引用了索引值），所以cell.dataset 是未定义的，因为该整数没有任何属性。在这种情况下，这不是一个真正有用的错误，但我认为是准确的。