带有输入字段的实时搜索表

Question

希望你能帮我解决这个问题。

我正在尝试对 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();
            });
          });

希望你能帮我解决这个问题。 贝斯特 / 弗雷德里克

Answer 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 中的正则表达式示例