Question

我有以下代码：

 <script type="text/javascript">
    function filter(phrase, _id) {
        var words = phrase.value.toLowerCase().split(" ");
        var table = document.getElementById(_id);
        var ele;
        for (var r = 1; r < table.rows.length; r++) {
            ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
            var displayStyle = 'none';
            for (var i = 0; i < words.length; i++) {
                if (ele.toLowerCase().indexOf(words[i]) >= 0)
                    displayStyle='';
                else {
                    displayStyle='none';
                    break;
                }
            }
            table.rows[r].style.display = displayStyle;
        }
    }
</script>

javascript正在定位此html表：

<body><form>
<b>Search:</b>
<input name="filt" onkeyup="filter(this, 'sf', '1')" type="text">
</form>
<br>
<table id="sf" width="100%" border="0" cellspacing="1" cellpadding="2">
    <tr bgcolor="">
        <td align="MIDDLE">
            <font color=""><b>First Name</b></font>
        </td>
        <td align="MIDDLE">
            <font color=""><b>Last Name</b></font>
        </td>
        <td align="MIDDLE">
            <font color=""><b>Location</b></font>
        </td>
        </tr>
    <tr bgcolor="#FFFFFF">
        <td>
            John
        </td>
        <td>
            Smith
        </td>
        <td>
            Sun
        </td>

    </tr>
    <tr bgcolor="#EAECEF">
        <td>
            James
        </td>
        <td>
            Bond
        </td>
        <td>
            Moon
        </td>

    </tr>
    <tr bgcolor="#FFFFFF">
        <td>
           Rob  
        </td>
        <td>
            Halford
        </td>
        <td>
           Mars
        </td>

    </tr>
</table>

当用户完成搜索查询并点击“输入”然后将结果显示为淡入时，我希望该表能够淡出。

有人可以帮我吗？

非常感谢！

Answer 1

替换，

table.rows[r].style.display = displayStyle;

用，

if displayStyle===''{
   $('#'+_id+' tr:eq(r-1)').fadeIn();
}
if displayStyle==='none'{
   $('#'+_id+' tr:eq(r-1)').fadeOut();
}

Answer 2

可以使用jQuery以简单明了的方式完成。如果你还没有使用它，你应该这样做。

将fadeIn / fadeOut添加到表结果中

2 个答案: