Добавить fadeIn / fadeOut к результатам таблицы - PullRequest
Новая
       22

Добавить fadeIn / fadeOut к результатам таблицы

0 голосов
/ 23 июня 2011

У меня есть следующий код: 

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

Я бы хотел, чтобы таблица fadeOut, когда пользователь завершил свой поисковый запрос и нажал 'enter', а затем результаты в fadeIn.

Может ли кто-нибудь помочь мне, пожалуйста?

Большое спасибо!

Ответы [ 2 ]

1 голос
/ 23 июня 2011

Заменить, 

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

на, 

if displayStyle===''{
   $('#'+_id+' tr:eq(r-1)').fadeIn();
}
if displayStyle==='none'{
   $('#'+_id+' tr:eq(r-1)').fadeOut();
}
0 голосов
/ 23 июня 2011

это можно сделать простым и удобным способом, используя jQuery . если вы еще не используете его, вы должны сделать.

...