时间戳

首页 > 解决方案 > 需要帮助在用于排序的 ul 列表中按索引调用表格行和单元格

javascript - 需要帮助在用于排序的 ul 列表中按索引调用表格行和单元格

问题描述

我有一个功能可以让你搜索一个列表，当找到匹配项时，它会隐藏所有

  • 并且只显示匹配项。每个 li 包含一个表。它工作正常，除了我需要能够按表格行和单元格搜索。

    现在，如果您搜索“红色”一词，它会显示所有带有红色的表格。我只想显示在我传递给搜索的行和单元格中具有“红色”的表格。换句话说，在第 1 行单元格 1 中包含红色的所有表格中搜索红色。

    我希望我解释清楚了。

    任何帮助将不胜感激。

    这是一个 LSFiddle 链接，可以查看它当前的工作方式： https ://jsfiddle.net/t205sx7d/

    谢谢迈克。

    <html>

<head>
<title>edit</title>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="font-family:Arial; font-weight:bold; font-size:12pt;">

<p>&nbsp;<input type="text" id="searchbox"> <input type="button" value="search" onclick = "DbSearch(searchbox.value)"> 
click search with a empty box to show all.</p>


<p>&nbsp;<span id="SearchTxt">Show all</span></p>


<ul id="LsUL">

<li>
<table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="90%">

<tr>
<td width="970" align="center" colspan="2" style="padding-top:5px; padding-bottom:5px;">

<table cellspacing="4" width="96%" bordercolordark="white" bordercolorlight="black" style="border-width:2px; border-color:blue; border-style:solid;" cellpadding="4" bgcolor="#CCCCCC">

<tr>
<td width="316" bgcolor="#666666"><font color="white"><b>edit</b></font></td>

<td width="316" align="center"><b>id: table 1</b></td>
<td width="316" align="right" bgcolor="#666666"><font color="white"><b>delete</b></font></td>
</tr>

</table>
</td>
</tr>

<tr>
<td width="483">Color 1:</td>
<td width="483">red</td>
</tr>

<tr>
<td width="483">Color 2:</td>
<td width="483">blue</td>
</tr>

<tr>
<td width="483">Color 3:</td>
<td width="483">green</td>
</tr>

</table>

<br>


<li>
<table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="90%">

<tr>
<td width="970" align="center" colspan="2" style="padding-top:5px; padding-bottom:5px;">

<table cellspacing="4" width="96%" bordercolordark="white" bordercolorlight="black" style="border-width:2px; border-color:blue; border-style:solid;" cellpadding="4" bgcolor="#CCCCCC">

<tr>
<td width="316" bgcolor="#666666"><font color="white"><b>edit</b></font></td>

<td width="316" align="center"><b>id: table 1</b></td>
<td width="316" align="right" bgcolor="#666666"><font color="white"><b>delete</b></font></td>
</tr>

</table>
</td>
</tr>

<tr>
<td width="483">Color 1:</td>
<td width="483">blue</td>
</tr>

<tr>
<td width="483">Color 2:</td>
<td width="483">red</td>
</tr>

<tr>
<td width="483">Color 3:</td>
<td width="483">pink</td>
</tr>

</table>

<br>

<li><table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="90%">

<tr>
<td width="970" align="center" colspan="2" style="padding-top:5px; padding-bottom:5px;">

<table cellspacing="4" width="96%" bordercolordark="white" bordercolorlight="black" style="border-width:2px; border-color:blue; border-style:solid;" cellpadding="4" bgcolor="#CCCCCC">

<tr>
<td width="316" bgcolor="#666666"><font color="white"><b>edit</b></font></td>

<td width="316" align="center"><b>id: table 1</b></td>
<td width="316" align="right" bgcolor="#666666"><font color="white"><b>delete</b></font></td>
</tr>

</table>
</td>
</tr>

<tr>
<td width="483">Color 1:</td>
<td width="483">green</td>
</tr>

<tr>
<td width="483">Color 2:</td>
<td width="483">yellow</td>
</tr>

<tr>
<td width="483">Color 3:</td>
<td width="483">red</td>
</tr>

</table>

<br>

</ul>


<script>  

  function DbSearch(search) {
  var filter, ul, li, a, i, txtValue, c=0;

  filter = search.toUpperCase();
  ul = document.getElementById("LsUL");
  li = ul.getElementsByTagName("li");

  for (i = 0; i < li.length; i++) {
  a = li[i].getElementsByTagName("table")[0];
  txtValue = a.textContent || a.innerText;

  if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; c+=1; }
  else { li[i].style.display = "none"; }
  }

  if (search == "") {SearchTxt.innerHTML = "Showing all records."}
  else {SearchTxt.innerHTML = "Searched: " +search+ " Found: " +c;} 

  }

</script> 




</body>

</html>

    • 标签： javascript

    解决方案

    我看到你的桌子里面有一个桌子头。我所做的是，在除 head 之外的所有行上，我添加了一个 class data。这表明我们在这些行中有数据。

    现在每次搜索时，我们都会查看每个表的这些数据行。如果存在具有所需索引 (1) 的行并且存在具有所需索引 (1) 的单元格，我们将显示该表。

    这是 JSFiddle 演示：JSFiddle

    这是代码：

    HTML

    <html>
   <head>
      <title>edit</title>
   </head>
   <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="font-family:Arial; font-weight:bold; font-size:12pt;">
      <p>&nbsp;<input type="text" id="searchbox"> <input type="button" value="search" onclick = "DbSearch(searchbox.value)"> 
         click search with a empty box to show all.
      </p>
      <p>&nbsp;<span id="SearchTxt">Show all</span></p>
      <ul id="LsUL">
         <li>
            <table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="90%">
               <tr>
                  <td width="970" align="center" colspan="2" style="padding-top:5px; padding-bottom:5px;">
                     <table cellspacing="4" width="96%" bordercolordark="white" bordercolorlight="black" style="border-width:2px; border-color:blue; border-style:solid;" cellpadding="4" bgcolor="#CCCCCC">
                        <tr>
                           <td width="316" bgcolor="#666666"><font color="white"><b>edit</b></font></td>
                           <td width="316" align="center"><b>id: tb1</b></td>
                           <td width="316" align="right" bgcolor="#666666"><font color="white"><b>delete</b></font></td>
                        </tr>
                     </table>
                  </td>
               </tr>
               <tr class="data">
                  <td width="483">Color 1:</td>
                  <td width="483">red</td>
               </tr>
               <tr class="data">
                  <td width="483">Color 2:</td>
                  <td width="483">blue</td>
               </tr>
               <tr class="data">
                  <td width="483">Color 3:</td>
                  <td width="483">green</td>
               </tr>
            </table>
            <br>
         <li>
            <table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="90%">
               <tr>
                  <td width="970" align="center" colspan="2" style="padding-top:5px; padding-bottom:5px;">
                     <table cellspacing="4" width="96%" bordercolordark="white" bordercolorlight="black" style="border-width:2px; border-color:blue; border-style:solid;" cellpadding="4" bgcolor="#CCCCCC">
                        <tr>
                           <td width="316" bgcolor="#666666"><font color="white"><b>edit</b></font></td>
                           <td width="316" align="center"><b>id: tb2</b></td>
                           <td width="316" align="right" bgcolor="#666666"><font color="white"><b>delete</b></font></td>
                        </tr>
                     </table>
                  </td>
               </tr>
               <tr class="data">
                  <td width="483">Color 1:</td>
                  <td width="483">blue</td>
               </tr>
               <tr class="data">
                  <td width="483">Color 2:</td>
                  <td width="483">red</td>
               </tr>
               <tr class="data">
                  <td width="483">Color 3:</td>
                  <td width="483">pink</td>
               </tr>
            </table>
            <br>
         <li>
            <table border="1" cellspacing="0" bordercolordark="white" bordercolorlight="black" width="90%">
               <tr>
                  <td width="970" align="center" colspan="2" style="padding-top:5px; padding-bottom:5px;">
                     <table cellspacing="4" width="96%" bordercolordark="white" bordercolorlight="black" style="border-width:2px; border-color:blue; border-style:solid;" cellpadding="4" bgcolor="#CCCCCC">
                        <tr>
                           <td width="316" bgcolor="#666666"><font color="white"><b>edit</b></font></td>
                           <td width="316" align="center"><b>id: tb3</b></td>
                           <td width="316" align="right" bgcolor="#666666"><font color="white"><b>delete</b></font></td>
                        </tr>
                     </table>
                  </td>
               </tr>
               <tr class="data">
                  <td width="483">Color 1:</td>
                  <td width="483">green</td>
               </tr>
               <tr class="data">
                  <td width="483">Color 2:</td>
                  <td width="483">yellow</td>
               </tr>
               <tr class="data">
                  <td width="483">Color 3:</td>
                  <td width="483">red</td>
               </tr>
            </table>
            <br>
      </ul>
   </body>
</html>

    Javascript

    function DbSearch(search) {
    var filter, ul, li, a, i, txtValue, c = 0;

    filter = search.toUpperCase();
    ul = document.getElementById("LsUL");
    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("table")[0];
        var cells = a.querySelectorAll(".data")

        // txtValue = a.textContent || a.innerText;

        if (cells[1]) {                                // The row you want to search
            var cols = cells[1].querySelectorAll("td");
            if (cols[1]) {                             // The col you want to search
                txtValue = cols[1].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "block";
                    c += 1;
                } else {
                    li[i].style.display = "none";
                }
            }
        }
    }

    if (search == "") {
        SearchTxt.innerHTML = "Showing all records."
    } else {
        SearchTxt.innerHTML = "Searched: " + search + " Found: " + c;
    }

}

    一个友好的建议：请在粘贴之前格式化您的代码，您可以使用HTML 格式化程序和Javascript 格式化程序，或任何其他工具。在线寻找任何语言的格式化程序或美化器，你会找到工具:)

    推荐阅读