javascript - 无法使用 jQuery 在 td 中获取输入？

Question

我无法获取<input>在指定的 <td> 内。通过 jQuery，我希望一旦输入“输入搜索”，就得到那些 <tr>具有这些条目。然后当输入为空时返回所有条目。

这是我的代码:

<table id="hosts">
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td id="host"><input type="text" id="inputhost" value="214215" size="16"></td>
        <td id="rand"><input type="text" id="inputrand" value="442" size="16"></td>
    </tr>
    <tr>
        <td id="host"><input type="text" id="inputhost" value="1252512" size="16"></td>
        <td id="rand"><input type="text" id="inputrand" value="556" size="16"></td>
    </tr>
    <tr>
        <td id="host"><input type="text" id="inputhost" value="2114" size="16"></td>
        <td id="rand"><input type="text" id="inputrand" value="4666" size="16"></td>
    </tr>
    <tr>
        <td id="host"><input type="text" id="inputhost" value="3245466" size="16"></td>
        <td id="rand"><input type="text" id="inputrand" value="22654" size="16"></td>
    </tr>
    <tr>
        <td id="host"><input type="text" id="inputhost" value="24588" size="16"></td>
        <td id="rand"><input type="text" id="inputrand" value="54877" size="16"></td>
    </tr>
</table>
<br />
<input type="text" id="search" placeholder="  live search"></input>

这是我的 jQuery 代码:

function removeHighlighting(highlightedElements) {
    highlightedElements.each(function () {
        var element = $(this);
        element.replaceWith(element.html());
    })
}

function addHighlighting(element, textToHighlight) {
    var text = element.text();
    var highlightedText = '<em>' + textToHighlight + '</em>';
    var newText = text.replace(textToHighlight, highlightedText);

    element.html(newText);
}

$("#search").on("keyup", function () {
    var value = $(this).val();

    removeHighlighting($("table tr em"));

    $("#hosts tr").each(function (index) {
        if (index !== 0) {
            $row = $(this);

            var $host = $row.find("#host input#inputhost");
            var $dest = $row.find("#rand input#inputrand");
            var host_id = $host.text();
            var dest_id = $dest.text();
            var hostIndex = host_id.indexOf(value);
            var destIndex = dest_id.indexOf(value);
            if ((hostIndex == -1) && (destIndex == -1)) {
                $row.hide();
            }
            else if ((hostIndex != -1) && (destIndex != -1)) {
                addHighlighting($host, value);
                addHighlighting($dest, value);
                $row.show();
            }
            else if (hostIndex != -1) {
                addHighlighting($host, value);
                $row.show();
            }
            else {
                addHighlighting($dest, value);
                $row.show();
            }
        }
    });
});

Answer 1

ID重复!你并不真的需要它们；删除它们，然后您的代码将是:

        var $host = $row.find("td:first input");
        var $dest = $row.find("td:eq(1) input");

更新

您还必须将代码更新为:

        var host_id = $host.val();
        var dest_id = $dest.val();

DEMO