单击按钮时，在数字输入框中输入数字值后，javascript 函数应在 HTML 表格中搜索数字框的匹配值，然后将 TD 单元格值更改为用户输入的任何值在另外 2 个输入框中(颜色和项目)。
我在下面放置了一些 html 编码来说明我想要完成的任务。我对 jQuery 很友好，如果它更容易使用，因为我自己不是一个足够熟练的程序员。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Number:*
<input type="text" id="number">
<br>
Items:
<input type="text" id="item">
<br>
Color:
<input type="text" id="color">
<br>
<br>
<input type="button" onclick="changeit()" value="save">
<br>
<table id="data" style="width: 100%" cellspacing="1" class="style1">
<tr>
<td><b>Number*</b></td>
<td><b>items</b></td>
<td><b>Colors</b></td>
</tr>
<tbody>
<tr>
<td>123</td>
<td>Boats</td>
<td>red</td>
</tr>
<tr>
<td>456</td>
<td>Vehicles</td>
<td>blue</td>
</tr>
<tr>
<td>789</td>
<td>Motorcycles</td>
<td>green</td>
</tr>
</tbody>
</table>
</body>
</html>
最佳答案
这个 fiddle 可以满足你的要求:
相关代码(使用 jQuery)在这里:
function changeit() {
var valueToFind = $('#number').val();
$('#data > tbody> tr').each(function(index) {
console.log(index);
var firstTd = $(this).find('td:first');
if ($(firstTd).text() == valueToFind) {
console.log("found: " + index + ":" + valueToFind);
$(this).find('td:eq(1)').text($('#item').val());
$(this).find('td:eq(2)').text($('#color').val());
}
})
}
您可能想要删除 console.log() 语句，并通过缓存 DOM 值来提高一点效率，但这就是您想要的要点。
关于javascript - 在 HTML 表中搜索值并更改其 TD 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31975437/