gpt4 book ai didi

javascript - 在 HTML 表中搜索值并更改其 TD 值

转载 作者:行者123 更新时间:2023-12-03 09:15:19 26 4
gpt4 key购买 nike

单击按钮时,在数字输入框中输入数字值后,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 可以满足你的要求:

http://jsfiddle.net/c84doLdm/

相关代码(使用 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com