Question

我在指定的<input>内没有<td>时遇到问题。通过jQuery，我想要一次＆＃34;输入搜索＆＃34;输入，只获得那些具有这些条目的<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。 Id应该是唯一的。将他们改为上课。然后它会工作。然后你的选择将是

$(this).find(".host input.inputhost")

Answer 2

重复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

没有使用jQuery在td中输入？

2 个答案: