获取html表格的rowdata innerHTML输入值

Question

我有一个包含静态值的基本 HTML 表格，但只有一个单元格除外，其中包含一个输入字段。

我正在抓取行数据并将其转换为 JSON，但单个输入字段会导致问题。

没有输入字段，我可以成功抓取所有的静态值，并把它们变成一个JSON对象，如下：

var table = document.getElementById('locationdetailsBody');
var locationjsonArr = [];
for(var i =0,row;row = table.rows[i];i++){
   var col = row.cells;
   var jsonObj = {
        currlocation : $.trim(col[0].innerHTML),
        currlocationname : $.trim(col[1].innerHTML),
        currlocationoperator : $.trim(col[2].innerHTML)
    }

  locationjsonArr.push(jsonObj);
}

上述代码有效，直到我将 .val() 添加到 currlocation 的 innertHTML：

currlocation : $.trim(col[0].innerHTML.val()),

输出错误是：

Uncaught TypeError: col[0].innerHTML.val is not a function

我需要能够获取输入字段的用户输入值并将其添加到 JSON。

我怎样才能做到这一点？

Answer 1

假设col[0]是对你表的td的引用，那么你可以使用querySelector()来检索子input来检索它的value。

还要注意，仅对$.trim() 使用 jQuery 有点浪费。你可以使用原生的trim() 函数并完全消除对jQuery 的依赖。另外你可以使用map()更简洁地构建数组：

var table = document.getElementById('locationdetailsBody');
var locationjsonArr = Array.from(table.rows).map(row => ({
  currlocation: row.cells[0].querySelector('input').value.trim(),
  currlocationname: row.cells[1].innerHTML.trim(),
  currlocationoperator: row.cells[2].innerHTML.trim()
}));

console.log(locationjsonArr);

<table id="locationdetailsBody">
  <tr>
    <td><input value="lorem" /></td>
    <td>ipsum</td>
    <td>dolor</td>
  </tr>
</table>

Answer 2

.val() 用于 <input> 和 <textarea> 值，如果您想获取元素的文本内容（不带标签），请使用 .text() 或 innerText 用于 vanilla JS