在桌子上搜索,实时

时间:2016-12-22 11:42:41

标签: php jquery html ajax

我有下表:

<input type="search" class="light-table-filter" id="search" data-

table="order-table" placeholder="Kerko">
<table border="0" class=" table table-striped table-hover table-bordered table-condensed tableDemo bordered order-table table" >

<tr id="header">
   <th>ID</th>
    <th>emri</th>
    <th>mbiemri</th>
    <th>username</th>
    <th>password</th>
    <th>email</th>
    <th>Nr Tel</th>
    <th>ACTION</th>
</tr>
    <?php
if(count($records)){
        $i = 1;
        $eachRecord= 0;
        foreach($records as $key=>$eachRecord){
            ?>


            <tr id="<?=$eachRecord['ID'];?>">
                <td><?=$eachRecord['ID'];?></td>
                <td class="Emri"><?=$eachRecord['Emri'];?></td>
                <td class="Mbiemri"><?=$eachRecord['Mbiemri'];?></td>
                <td class="Username"><?=$eachRecord['Username'];?></td>
                <td class="Password"><?=$eachRecord['Password'];?></td>
                <td class="Email"><?=$eachRecord['Email'];?></td>
                <td class="nrtel"><?=$eachRecord['nrtel'];?></td>
                <td>
                    <a href="javascript:;" id="<?=$eachRecord['ID'];?>" class="ajaxEdit"><img src="" class="eimage"> <span class="glyphicon glyphicon-pencil"></span></a>
                    <a href="javascript:;" id="<?=$eachRecord['ID'];?>" class="ajaxDelete"><img src="" class="dimage">  <span class="glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
        <?php }
    }

    ?>
</table>

此外,我想进行实时搜索,我有以下jquery代码:

    <script type="text/javascript">
    (function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

        var _input;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _filter(row) {
            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('light-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            LightTableFilter.init();
        }
    });
  })(document); 

它完美地运行它。但我想搜索除了具有id#header的表头之外的所有行。我不能更改jquery代码。我也尝试了一些不同的jquery但只有上面的jquery代码才能完美为了我。唯一的问题是,当我写一些东西的代码时,它找到了行但是标题隐藏了。

0 个答案:

没有答案