动态过滤表格和文本框

时间:2017-10-20 17:31:29

标签: javascript jquery html

目前,我尝试仅向用户显示行,如果该行包含用户搜索的内容。这样的一个例子是,如果用户搜索poop,他们将显示包含poop的所有行。但是出于某种原因,我的搜索仅从行的最后一列获取信息而不是整行。

$("#searchInput").keyup(function() {
	var val = $(this).val();
    
	$("#searchTable tr td").each(function(i) {
	var content = $(this).html();
		if (content.toLowerCase().indexOf(val) == -1) {
			$(this).parent().hide();
		} else {
			$(this).parent().show();
		}
	});
});
<div>
        <input type="text" id="searchInput" />
        <table id="searchTable">
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>Latest</td>
            </tr>
            <tr>
                <td>Mest</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>Best</td>
                <td>chest</td>
            </tr>
            <tr>
                <td>chest</td>
                <td>poop</td>
            </tr>
            <tr>
                <td>test</td>
                <td>poop</td>
            </tr>
            <tr>
                <td>Waste</td>
                <td>poop</td>
            </tr>
            <tr>
                <td>Test</td>
                <td>poop</td>
            </tr>
        </table>


    </div>

1 个答案:

答案 0 :(得分:2)

现在它有效。只查看“tr”元素而不是“td tr”元素

JS Fiddle

<强> JS

$("#searchInput").keyup(function() {
    var val = $(this).val();

    $("#searchTable tr").each(function(i) {
    var content = $(this).html();
        if (content.toLowerCase().indexOf(val.toLowerCase()) == -1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});