Question

我试图为每个表列添加一个单独的搜索框，但没有成功。为了使其正常工作，应在下面的代码中添加什么？

当前，我的代码仅在第一列中包含一个搜索框。

请运行代码段以获取详细信息。

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

p.a {
        white-space: nowrap;
    }
    h2 {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
    }
    table {
        margin-left: auto;
        margin-right: auto;
    }
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: left;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 90%;
        white-space:nowrap;
    }
    table tbody tr:hover {
        background-color: #dddddd;
    }
    .wide {
        width: 90%;
    }

   <h2> Title here </h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><table border="1" class="dataframe wide" id="myTable">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>KEY</th>
      <th>DEVREVSTEP</th>
      <th>WW32</th>
      <th>WW33</th>
      <th>WW34</th>
      <th>WW35</th>
      <th>WW36</th>
      <th>WW37</th>
      <th>WW38</th>
      <th>WW39</th>
      <th>WW40</th>
      <th>Rule</th>
      <th>LINK</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>First</td>
      <td>A</td>
      <td>-0.64</td>
      <td>6.47</td>
      <td>23.14</td>
      <td>3.51</td>
      <td>0.13</td>
      <td>-0.41</td>
      <td>-0.59</td>
      <td>-0.31</td>
      <td>33.13</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Second</td>
      <td>B</td>
      <td>-18.04</td>
      <td>-18.42</td>
      <td>-17.44</td>
      <td>-16.35</td>
      <td>-19.06</td>
      <td>-17.49</td>
      <td>-18.62</td>
      <td>-17.92</td>
      <td>-18.23</td>
      <td>C</td>
      <td>Amazon.com</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Third</td>
      <td>C</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>-0.59</td>
      <td>2.25</td>
      <td>-0.33</td>
      <td>0.55</td>
      <td>-0.53</td>
      <td>8.96</td>
      <td>17.53</td>
      <td>B</td>
      <td>Ebay.com</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Fourth</td>
      <td>A</td>
      <td>-0.18</td>
      <td>3.25</td>
      <td>7.63</td>
      <td>1.90</td>
      <td>-0.19</td>
      <td>0.41</td>
      <td>0.15</td>
      <td>0.20</td>
      <td>17.31</td>
      <td>A</td>
      <td>Yahoo.com</td>
    </tr>
    <tr>
      <th>4</th>
      <td>Fourth</td>
      <td>A</td>
      <td>0.24</td>
      <td>-3.25</td>
      <td>-6.42</td>
      <td>-1.51</td>
      <td>0.60</td>
      <td>-0.01</td>
      <td>0.25</td>
      <td>-0.02</td>
      <td>-15.13</td>
      <td>A</td>
      <td>MSN.com</td>
    </tr>
    <tr>
      <th>5</th>
      <td>First</td>
      <td>D</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>5.06</td>
      <td>NaN</td>
      <td>1.27</td>
      <td>-0.56</td>
      <td>13.24</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
    
   
    
  </tbody>
</table>

Answer 1

如果只想显示与所有输入的过滤器值都匹配的行，则最好在每次更改时循环遍历所有输入字段，这最容易处理。

我在此处将输入字段插入表标题单元格中，然后只需使用getElementsByTagName进行选择-您可以将其更改为其他位置和/或使用其他方法进行选择（可能是按类），那么可能需要稍作修改。

请注意，在两个循环中我如何从此处的索引1开始而不是0-忽略i循环中的第一表行（因为标题行不应消失；可以通过仅选择开头的所有行），并忽略j循环中的第一个单元格。而且由于输入字段的数量比每行单元格的数量少一，因此我使用索引j - 1访问输入，得到与单元格索引相对应的那个。

这可能会在几个地方留有完善的空间，但应该足以说明基本原理。

function myFunction() {
  var inputs, table, tr, i, j, inputValue, txtValue, showRow;
  inputs = document.getElementsByTagName("input");
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    showRow = true;
    for (j = 1; j < tr[i].cells.length; j++) {
      inputValue = inputs[j - 1].value
      txtValue = tr[i].cells[j].textContent || tr[i].cells[j].innerText;
      if (inputValue != "" && txtValue.toUpperCase().indexOf(inputValue.toUpperCase()) == -1) {
        showRow = false;
        break;
      }
    }
    tr[i].style.display = showRow ? "" : "none";
  }
}

p.a {
  white-space: nowrap;
}

h2 {
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}

table {
  margin-left: auto;
  margin-right: auto;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: left;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 90%;
  white-space: nowrap;
}

table tbody tr:hover {
  background-color: #dddddd;
}

.wide {
  width: 90%;
}

<h2> Title here </h2>
<table border="1" class="dataframe wide" id="myTable">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th><input type="text" onkeyup="myFunction()"><br>KEY</th>
      <th><input type="text" onkeyup="myFunction()"><br>DEVREVSTEP</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW32</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW33</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW34</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW35</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW36</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW37</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW38</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW39</th>
      <th><input type="text" onkeyup="myFunction()"><br>WW40</th>
      <th><input type="text" onkeyup="myFunction()"><br>Rule</th>
      <th><input type="text" onkeyup="myFunction()"><br>LINK</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>First</td>
      <td>A</td>
      <td>-0.64</td>
      <td>6.47</td>
      <td>23.14</td>
      <td>3.51</td>
      <td>0.13</td>
      <td>-0.41</td>
      <td>-0.59</td>
      <td>-0.31</td>
      <td>33.13</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>
    <tr>
      <th>1</th>
      <td>Second</td>
      <td>B</td>
      <td>-18.04</td>
      <td>-18.42</td>
      <td>-17.44</td>
      <td>-16.35</td>
      <td>-19.06</td>
      <td>-17.49</td>
      <td>-18.62</td>
      <td>-17.92</td>
      <td>-18.23</td>
      <td>C</td>
      <td>Amazon.com</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Third</td>
      <td>C</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>-0.59</td>
      <td>2.25</td>
      <td>-0.33</td>
      <td>0.55</td>
      <td>-0.53</td>
      <td>8.96</td>
      <td>17.53</td>
      <td>B</td>
      <td>Ebay.com</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Fourth</td>
      <td>A</td>
      <td>-0.18</td>
      <td>3.25</td>
      <td>7.63</td>
      <td>1.90</td>
      <td>-0.19</td>
      <td>0.41</td>
      <td>0.15</td>
      <td>0.20</td>
      <td>17.31</td>
      <td>A</td>
      <td>Yahoo.com</td>
    </tr>
    <tr>
      <th>4</th>
      <td>Fourth</td>
      <td>A</td>
      <td>0.24</td>
      <td>-3.25</td>
      <td>-6.42</td>
      <td>-1.51</td>
      <td>0.60</td>
      <td>-0.01</td>
      <td>0.25</td>
      <td>-0.02</td>
      <td>-15.13</td>
      <td>A</td>
      <td>MSN.com</td>
    </tr>
    <tr>
      <th>5</th>
      <td>First</td>
      <td>D</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>NaN</td>
      <td>5.06</td>
      <td>NaN</td>
      <td>1.27</td>
      <td>-0.56</td>
      <td>13.24</td>
      <td>A</td>
      <td>Google.com</td>
    </tr>



  </tbody>
</table>

单个列搜索（文本输入）

1 个答案: