带输入字段的实时搜索表

时间:2016-12-19 00:15:26

标签: javascript jquery html search filter

希望你能帮助我。

我正在尝试对html表进行实时搜索,当每个单元格只包含文本时,我可以使用它。然后我将文本更改为输入type =“text”,以便我可以切换只读。 现在我正在尝试搜索表格,它可以达到50%。我希望能够像在文本中那样搜索每一行中的所有输入,但现在只需要每行的第一个输入而且我被卡住了。

这是我的代码: 表包装表> TBODY

<form method="post" action="'. $_SERVER["PHP_SELF"] .'" >
                <input type="hidden" name="id" value="' . $row['id'] . '">
                <tr>
                    <td style="font-weight: 700;">
                        <input class="name" type="text" name="name" value="' . $row['name'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="phone" value="' . $row['phone'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="email" value="' . $row['email'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="business_name" value="' . $row['business_name'] . '" readonly>
                    </td>

                    <td>
                        <input type="text" name="title" value="' . $row['title'] . '" readonly>
                    </td>

                    <td class="actions send">
                        <a href="mailto:'. $row['email'] .'">
                        <i class="fa fa-send"></i>
                        </a>
                    </td>

                    <td class="actions edit">
                        <button type="submit" name="edit_people">
                        <i class="fa fa-pencil"></i>
                        </button>
                    </td>

                    <td class="actions contacted">
                        <button type="submit" name="contacted_people" value="' . $row['contacted'] . '">
                        <i class="fa fa-comment" style="' . $switch . '"></i>
                        </button>
                    </td>

                    <td class="actions remove">
                        <button type="submit" name="remove_people">
                        <i class="fa fa-close"></i>
                        </button>
                    </td>
                </tr>
            </form>

它循环通过我的数据库并输出多个TR

这是我的jquery

$("#Search").keyup(function() {
            _this = this;
            // Show only matching TR, hide rest of them
            $.each($('.addressbook tbody tr'), function() {
              if ($(this).find('input[type="text"]').val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                $(this).hide();
              else
                $(this).show();
            });
          });

希望你能帮助我。 Best / Fredrik

1 个答案:

答案 0 :(得分:1)

试试这个

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

    $.each($('.addressbook tbody tr'), function() {
        if($(this).find('input[type="text"][value*="'+searchstring+'"]').length > 0 || searchstring.trim().length == 0){
            // show
            $(this).show();
        }else{
            // hide
            $(this).hide();
        }

    });
});

如果需要,请查看jquery documentation中的正则表达式示例