获取 html table 的行数据 innerHTML 输入值

Question

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

我正在抓取行数据并将其转换为 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 的 innerHTML:

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

输出错误为：

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

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

我怎样才能完成这项工作？

Answer 1

.val() 用于 <input> 和 <textarea> 值，如果你想获取元素的文本内容（没有标签）使用 .text() 或 innerText对于香草 JS

Answer 2

假设col[0]是对你的table的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>

获取 html table 的行数据 innerHTML 输入值

get rowdata innerHTML input value of html table

javascript

jquery

json

innerhtml