使用 Javascript 的表搜索功能

Question

你好， 我正在尝试调试可以在下面的 sn-p 中找到的 Java Script 函数。

功能用途：

• 通过在每个列名上方添加一个文本字段，在多个表列中添加搜索功能。
• 该函数旨在过滤每列中不包含所有用户输入字符串的所有表行。

无法弄清楚为什么我的表格搜索功能无法正常工作。请在下面运行 sn-p 来模拟问题。

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";
  }
}

body {
      background-color: #F8F8F8;
    }
    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%;
    }
    .bgred{
    background-color: red;
    }
  .bggreen{
    background-color: green;
    }
  .bgyellow{
    background-color: yellow;
    }
    .bgwhite{
      background-color: white;
    }

<h2> Report </h2> 
	<table border="1" class="dataframe wide" id="myTable"> 
	<thead> 
	<tr style="text-align: right;"> 
	<th></th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col1</th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col2</th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col3</th> 
	<th><input type="text" onkeyup="myFunction()"><br>Col4</th> 
	<th>RAW_LINK</th> 
	<th>LINK</th> 
	<th><input type="text" onkeyup="myFunction()"><br>RULE</th> 
	<th>WW 51</th> 
	<th>WW 50</th> 
	<th>WW 49</th> 
	<th>WW 48</th> 
	<th>WW 47</th> 
	<th>WW 46</th> 
	<th>WW 45</th> 
	<th>WW 44</th> 
	<th>WW 43</th> 
	<th>WW 42</th> 
	<th>WW 41</th> 
	<th>WW 40</th> 
	<th>WW 39</th> 
	<th>WW 38</th> 
	<th>WW 37</th> 
	<th>WW 36</th> 
	<th>WW 35</th> 
	<th>WW 34</th> 
	</tr> 
	</thead> 
	<tbody> 
	<tr> 
	<th>0</th> 
	<td>SomeVal</td> 
	<td> SomeVal2</td> 
	<td> SomeVal3</td> 
	<td> SomeVal4</td> 
	<td onclick="window.open('Google.com')">Click Here</td> 
	<td onclick="window.open(''Amazon.com')">Click Here</td> 
	<td>OOC for 2 weeks</td> 
	<td>-8.30</td> 
	<td>-12.41</td> 
	<td>NaN</td> 
	<td>-5.24</td> 
	<td>-10.25</td> 
	<td>-5.20</td> 
	<td>-5.05</td> 
	<td>-19.86</td> 
	<td>-15.55</td> 
	<td>-17.60</td> 
	<td>0.61</td> 
	<td>-0.06</td> 
	<td>0.11</td> 
	<td>-0.00</td> 
	<td>0.59</td> 
	<td>1.71</td> 
	<td>-0.17</td> 
	<td>NaN</td> 
	</tr> 
	<tr> 
	<th>1</th> 
	<td> SomeVal4</td> 
	<td> SomeVal45</td> 
	<td> SomeVal6</td> 
	<td> SomeVal7</td> 
	<td onclick="window.open(''Google.com')">Click Here</td> 
	<td onclick="window.open(' Amazon.com')">Click Here</td> 
	<td>OOC</td> 
	<td>7.69</td> 
	<td>0.36</td> 
	<td>-1.28</td> 
	<td>-1.57</td> 
	<td>0.66</td> 
	<td>1.63</td> 
	<td>0.40</td> 
	<td>-0.43</td> 
	<td>-0.60</td> 
	<td>0.66</td> 
	<td>-0.17</td> 
	<td>-0.86</td> 
	<td>-1.20</td> 
	<td>0.73</td> 
	<td>0.30</td> 
	<td>-0.42</td> 
	<td>-1.19</td> 
	<td>-0.26</td> 
	</tr> 
	<tr> 
	<th>2</th> 
	<td>SomeVa</td> 
	<td>SomeVa12</td> 
	<td>SomeVa3</td> 
	<td>SomeVa</td> 
	<td onclick="window.open(''Google.com')">Click Here</td> 
	<td onclick="window.open(''Google.com')">Click Here</td> 
	<td>OOC for 2 weeks</td> 
	<td>-4.65</td> 
	<td>-3.58</td> 
	<td>NaN</td> 
	<td>-0.82</td> 
	<td>-1.43</td> 
	<td>-3.29</td> 
	<td>-3.76</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	<td>NaN</td> 
	</tr> 
	</tbody> 
	</table>

功能用途：

在多个表格列中添加搜索功能。 该函数旨在过滤每列中不包含用户输入字符串的所有表行。 无法弄清楚为什么我的表格搜索功能无法正常工作。

Answer 1

在某些<th> 元素中，您没有<input> 元素，因此您的脚本在执行inputValue = inputs[j - 1].value; 时会失败，因为没有这样的inputs[j - 1]。

为了让您的脚本正常工作，每个 TH 元素都应该有一个输入。要么隐藏它（可以使用hidden 属性或使用 CSS 类）或相应地更改 JS。