Question

单击按钮，在数字输入框中输入数字值后，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>

Answer 1

这个小提琴符合你的要求：

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值来提高效率，但这是您想要的要点。

Answer 2

这里有一些jQuery伪代码广泛地做你想做的事情：

var number = $("#number").val(); // get the number the user entered
var numberCell = $("td:contains('" + number + "')"); // get a reference to the <td> tag with the same number as the one the user typed in
var row = numberCell.parent(); // get a reference to the <tr> tag that `numberCell` is inside of

var itemCell = row.children()[1]; // get a reference to the item <td>
itemCell.html($("#item").val()); // put the user's item into the item cell

var colorCell = row.children()[2]; // get a reference to the color <td>
colorCell.html($("#color").val()); // put the user's color into the color cell

我猜你想把它放在changeit()函数中。您需要添加错误检查和填充（如果用户输入的数字不存在，该怎么办？）但是应该完成基本工作。

Answer 3

将以下代码复制并粘贴到您的代码上。那应该可以胜任！

<script>
    var table,
        number,
        item,
        color,
        save;

    table = document.getElementById('data');

    number = document.getElementById('number');
    item = document.getElementById('item');
    color = document.getElementById('color');
    save  = document.getElementById('save');

    save.addEventListener('click', function(e){
        var rows = table.querySelectorAll('tbody tr');
        for(var i = 0; i < rows.length; ++i){
            if(parseInt(rows[i].cells[0].innerHTML) == parseInt(number.value)){
                rows[i].cells[1].innerHTML = item.value;
                rows[i].cells[2].innerHTML = color.value;
            }
        }
    });

</script>

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

3 个答案: