在表格结果中添加fadeIn / fadeOut

如何解决在表格结果中添加fadeIn / fadeOut

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

我希望当用户完成搜索查询并点击\'enter \'然后将结果淡入淡出时将表格淡出淡出。有人可以帮我吗？非常感谢！

解决方法

更换，

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

与，

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

, 可以使用jQuery以一种很好而简单的方式完成它。如果您尚未使用它，则应该使用。