Question

我正在尝试对4列进行搜索，并期望结果具有结果的并集。

例如：如果关键字“ Test”在两行中的两列中然后应同时显示两行。

但是目前我只能搜索一列。有没有一种方法可以搜索多个列。我的搜索功能如下。任何建议，谢谢。

function MySearch() {
        // Declare variables
        var input, filter, table, tr, td, td1,td2,td3, i;
        input = document.getElementById("TxtSearch");
        filter = input.value.toUpperCase();
        table = document.getElementById("TblSearchData");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            td1 = tr[i].getElementsByTagName("td")[1];
            td2 = tr[i].getElementsByTagName("td")[2];
            td3 = tr[i].getElementsByTagName("td")[3];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
             if (td1) {
                if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
            else if (td2) {
                if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
            else if (td3) {
                if (td3.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }

Answer 1

基本上，您有主意。.只有我调整过...决定是否显示...在所有“ td”中执行搜索之后...并且最初没有出现...是因为td取消其他操作……效果不理想。……尝试下面的代码

对不起，我的英语

function MySearch() {
            // Declare variables
            var input, filter, table, tr, td, td1,td2,td3, i;
            input = document.getElementById("TxtSearch");
            filter = input.value.toUpperCase();
            table = document.getElementById("TblSearchData");
            tr = table.getElementsByTagName("tr");

            // Loop through all table rows, and hide those who don't match the search query
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                td1 = tr[i].getElementsByTagName("td")[1];
                td2 = tr[i].getElementsByTagName("td")[2];
                td3 = tr[i].getElementsByTagName("td")[3];

                is_present = 0;

                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        is_present = 1
                    }
                }
                 if (td1) {
                    if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        is_present = 1
                    }
                }
                else if (td2) {
                    if (td2.innerHTML.toUpperCase().indexOf(filter) > -1) {
                         is_present = 1
                    }
                }
                else if (td3) {
                    if (td3.innerHTML.toUpperCase().indexOf(filter) > -1) {
                         is_present = 1
                    }
                }

                if (is_present == 1) {
                    tr[i].style.display = "";

                    } else {
                        tr[i].style.display = "none";
                }
            }
        }

Answer 2

这是jQuery的部分版本，即使您添加行也应该可以使用，因为它每次都从顶部开始。我添加了一个清除按钮只是为了展示如何做到这一点。

如果您希望匹配所有输入的术语，则需要像“兔子鱼”那样进行稍微的修改，例如仅返回1行。

支持多个字词（含）：尝试使用“红色橙色”或“黑色兔子”
支持空搜索（显示全部）
不支持部分单词。
支持添加新列。

$('#searchem').on('click', function() {
  let searchText = $('#TxtSearch').val();
  let searchTerms = searchText != ""? searchText.split(" "): [];
  MySearch(searchTerms);
});
$('#clearem').on('click', function() {
  let searchText = $('#TxtSearch');
  searchText.val("");
  let searchTerms = [];
  MySearch(searchTerms);
});

function MySearch(terms) {
  let searchTable = $('#TblSearchData');
  let searchRows = searchTable.find('tbody').find('tr');
  let searchValues = searchRows.find('td');
  // console.log("terms:",terms.length);
  searchValues.closest('tr').toggle(!terms.length); //hide em all
  // show ones with matches
  searchValues.filter(function(index, element) {
    let found = false;
    var fieldTerms = $(element).text().split(" ");
    for (let term of fieldTerms) {
      //  console.log("term:", term);
      if (terms.includes(term)) {
        //   console.log("Found:", term);
        found = true;
        break;
      }
    }
    return found;
  }).closest('tr').toggle(true);
  // Declare variables
}

td {
  border: solid blue 1px;
}

.found {
  display: solid red 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input id="TxtSearch" type="text" />
<button id="searchem" type="button">Search</button><button id="clearem" type="button">Clear</button>
<table id="TblSearchData">
  <tbody>
    <tr>
      <td>Row 1 blue fish</td>
      <td>feet, what are feet</td>
      <td>reep red</td>
      <td>sad panda</td>
      <td>black panda</td>
      <td>cheese ball</td>
    </tr>
    <tr>
      <td>Row 2 red fish</td>
      <td>white fish</td>
      <td>blue cat</td>
      <td>orange moose</td>
      <td>bunny fish</td>
      <td>tish fish</td>
    </tr>
    <tr>
      <td>Row 3 orange fish</td>
      <td>wax moose</td>
      <td>brown moose</td>
      <td>walter here</td>
      <td>gone tish</td>
      <td>wonder what</td>
    </tr>
    <tr>
      <td>Row 4 one fish</td>
      <td>orange cow</td>
      <td>moose cow with blue feet</td>
      <td>chicken</td>
      <td>chicken egg</td>
      <td>petes dragon</td>
    </tr>
  </tbody>
</table>

基于多列的HTML表上的Javascript搜索

2 个答案: