获取rowdata innerHTML的html表输入值

Question

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

我正在抓取rowdata并将其转换为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()添加到currentlocation的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香草JS