首页  >  文章  >  javascript - HTML-Table 组合两个过滤器脚本

javascript - HTML-Table 组合两个过滤器脚本

javascripthtml

我有两个过滤器，一个是 => 大于或 =< 小于一列，另一个是 => 大于和来自不同列的输入框。

我怎样才能将它们组合成一个代码，以便它们一起工作？

谢谢😃

function search() {
    // Declare variables
    var select, option, filter, table, tr, td_Ht, td_unf, i, cellValue;
    var un_fact = document.getElementById('l_Oad')
     select = document.getElementById('column_Height');
         option = select.options[select.selectedIndex];
    document.getElementById('value').value = option.text;
        document.getElementById('text').value = option.value;
    filter = parseInt(option.value);
    table = document.getElementById("myTable");
    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_Ht = tr[i].getElementsByTagName("td")[4];
      td_unf = tr[i].getElementsByTagName("td")[1];
      if (td_Ht) {
        cellValue = parseInt(td_Ht.innerHTML);
        if ((cellValue >= option.text) && (cellValue <= option.value)) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
      }
    }
  }
  function search_UnF() {
    // Declare variables
    var filter, table, tr, td_unf, i, cellValue;
    var un_fact = document.getElementById('l_oad')
    filter = parseInt(un_fact.value);
    table = document.getElementById("myTable");
    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_unf = tr[i].getElementsByTagName("td")[1];
      if (td_unf) {
        cellValue = parseInt(td_unf.innerHTML);
        if (cellValue >= filter) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
      }
    }
  }
* {
  box-sizing: border-box;
}

.row {
  margin-left:-5px;
  margin-right:-5px;
}
  
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}
table, th, td {
  border: 1px solid rgb(8, 18, 1);
  border-collapse: collapse;  
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}
table {
    border-collapse: collapse;
  }
  td {
    border: 1px solid #ccc;
  }
  th, td {
    padding: 10px;
    text-align: left;
  }
  tr:nth-child(even) {
    background-color: rgb(30, 131, 5);
  }
  tr:nth-child(odd) {
    background-color: rgb(36, 84, 25);
  }       

#column_Height{
 width:60px;   
}
<h2>COLUMNS</h2>

<label for="column_Height">Column Height:</label>
<select id="column_Height" onChange="search()" ;>
    <option value="">Select</option>
    <option value="90">89</option>
    <option value="96">90</option>
    <option value="102">96</option>
    <option value="120">102</option>
    <option value="144">120</option>
    <option value="168">144</option>
    <option value="192">168</option>
    <option value="216">192</option>
    <option value="216">216</option>
</select> 
<label for="value">Between</label>
<input type="text" id="value" size="4" disabled>
<label for="text">and</label>
<input type="text" id="text" size="4" disabled>
<label for="l_oad">Enter Unfactored</label>
<input type="text" id="l_oad" onkeyup="search_UnF()" placeholder="Unfactored.." title="Load" size="15">

<h2>Posts and Plate/Saddles</h2>
<p>Post selector and top Plates for spliced beams:</p>

<div class="row">
<div class="column">
<table id="myTable">
<tr class="header">
<th style="width:25%;">PRODUCT</th>
<th style="width:12.5%;">UNFACT</th>
<th style="width:12.5%;">EXT</th>
<th style="width:35%;">BASE/TOP</th>
<th style="width:10%;">HeiGHT</th>
</tr>
<tr>
<td>STS-7.5 - NS</td>
<td>11190</td>
<td>7' 6"</td>
<td>B 4"x4" / T 3.5"x5.25"</td>
<td>90</td>
</tr>
<tr>
<td>STS-8.0 - NS</td>
<td>10175</td>
<td>8'0"</td>
<td>B 4"x4" / T 3.5"x5.25*</td>
<td>96</td>
</tr>
<tr>
<td>STS-8.5</td>
<td>9200</td>
<td>8' 6"</td>
<td>B 4"x4" / T 3.5"x5.25"</td>
<td>102</td>
</tr>
<tr>
<td>STS-10</td>
<td>7050</td>
<td>10' 0"</td>
<td>B 4"x4" / T 3.5"x5.25"</td>
<td>120</td>
</tr>
<tr>
<td>STL-7.4 - NS</td>
<td>17080</td>
<td>7' 5"</td>
<td>Larger Top Plate Req'd.</td>
<td>89</td>
</tr>
<tr>
<td>STL-8.0 - NS</td>
<td>15720</td>
<td>8' 0"</td>
<td>4"x6" 5"x7"</td>
<td>96</td>
</tr>
<tr>
<td>STL-8.5</td>
<td>14400</td>
<td>8' 6"</td>
<td>4"x6' 5"x7"</td>
<td>102</td>
</tr>

<tr>
<td>STL-10</td>
<td>11300</td>
<td>10' 0"</td>
<td>4"x6" 5"x7"</td>
<td>120</td>
</tr>
<tr>
<td>STM1-7.4 - NS</td>
<td>26070</td>
<td>7' 5"</td>
<td>4"x8" 6"x8"</td>
<td>89</td>
</tr>
<tr>
<td>STM1-8.0 - NS</td>
<td>24390</td>
<td>8' 0"</td>
<td>4 x8 6 x8</td>
<td>96</td>
</tr>
<tr>
<td>STM1-8.5</td>
<td>22730</td>
<td>8' 6"</td>
<td>4"x8" 6"x8"</td>
<td>102</td>
</tr>
<tr>
<td>STM1-10</td>
<td>18300</td>
<td>10' 0"</td>
<td>4"x8", 6"x8"</td>
<td>120</td>

</tr>
<tr>
<td>STM1-12</td>
<td>13970</td>
<td>12' 0"</td>
<td>4"x8" 6"x8"</td>
<td>144</td>

</tr>
<tr>
<td>STM1-14</td>
<td>10830</td>
<td>14' 0"</td>
<td>4"x8" 6" x8"</td>
<td>168</td>

</tr>
<tr>
<td>STM2-8.0 - NS</td>
<td>34140</td>
<td>8' 0"</td>
<td>4"x8" 6"x8"</td>
<td>96</td>

</tr>
<tr>
<td>STM2-8.5</td>
<td>31730</td>
<td>8' 6"</td>
<td>4"x8" 6"x8"</td>
<td>102</td>

</tr>
<tr>
<td>STM2-10</td>
<td>25600</td>
<td>10' 0"</td>
<td>4"x8" 6"x8"</td>
<td>120</td>

</tr>
<tr>
<td>STM2-12</td>
<td>19390</td>
<td>12' 0"</td>
<td>4"x8" 6"x8"</td>
<td>144</td>

</tr>
<tr>
<td>STM2-14</td>
<td>15000</td>
<td>14' 0"</td>
<td>4"x8" 6"x8"</td>
<td>168</td>

</tr>
<tr>
<td>STM2-16</td>
<td>11840</td>
<td>16' 0"</td>
<td>4"x8" 6"x8"</td>
<td>192</td>

</tr>
<tr>
<td>STH-8.0 - NS</td>
<td>48200</td>
<td>8' 0"</td>
<td>B6"x6" / T7"x10"</td>
<td>96</td>

</tr>
<tr>
<td>STH-8.5</td>
<td>45500</td>
<td>8' 6"</td>
<td>B 6"x6" / T 7"x10"</td>
<td>102</td>

</tr>
<tr>
<td>STH-10</td>
<td>37740</td>
<td>10' 0"</td>
<td>B 6"x6" / T 7"x10"</td>
<td>120</td>

</tr>
<tr>
<td>STH-12</td>
<td>29640</td>
<td>12' 0"</td>
<td>B 6"x6" / T7"x10"</td>
<td>144</td>

</tr>
<tr>
<td>STH-14</td>
<td>23390</td>
<td>14' 0"</td>
<td>B 6"x6" / T 7"x10"</td>
<td>168</td>

</tr>
<tr>
<td>STH-16</td>
<td>18750</td>
<td>16' 0"</td>
<td>B 6"x6" / T7"x10"</td>
<td>192</td>

</tr>
<tr>
<td>STXH-8.0 - NS</td>
<td>80070</td>
<td>8' 0"</td>
<td>Larger Top Plate Req'd</td>
<td>96</td>

</tr>
<tr>
<td>STXH-8.5</td>
<td>76210</td>
<td>8' 6"</td>
<td>B 8"x8" / T7"x14"</td>
<td>102</td>

</tr>
<tr>
<td>STXH-10</td>
<td>65090</td>
<td>10' 0"</td>
<td>B 8"x8" / T 7"x14"</td>
<td>120</td>

</tr>
<tr>
<td>STXH-12</td>
<td>52300</td>
<td>12' 0"</td>
<td>B 8"x8" / T7"x14"</td>
<td>144</td>

</tr>
<tr>
<td>STXH-14</td>
<td>42200</td>
<td>14' 0"</td>
<td>B 8"x8" / T 7"x14"</td>
<td>168</td>

</tr>
<tr>
<td>STXH-16</td>
<td>34340</td>
<td>16' 0"</td>
<td>B 8"x8* / T 7nx14"</td>
<td>192</td>

</tr>
<tr>
<td>STXH-18</td>
<td>28170</td>
<td>18' 0"</td>
<td>B 8"x8" / T 7"x14"</td>
<td>216</td>

</tr>


</table>

回答1

好吧，您可以创建单独的函数来告诉您何时过滤一行。每个函数都有检查过滤器所需的行和其他参数：

function filterSearch(tr, text, value) {
   let td_Ht = tr.getElementsByTagName("td")[4];
   let td_unf = tr.getElementsByTagName("td")[1];
   if (td_Ht) {
     let cellValue = parseInt(td_Ht.innerHTML);
     return cellValue < text || cellValue > value;
   }
}

function filterUnF(tr, filter) {
  if (isNaN(filter))
    return false;
       
  let td_unf = tr.getElementsByTagName("td")[1];
  if (td_unf) {
    let cellValue = parseInt(td_unf.innerHTML);
    return cellValue < filter);
  }
}

然后，您迭代所有行，并且对于每一行，您检查它是否通过了过滤器：

function search() {
  // Declare variables
  var select, option, filter, table, tr, td_Ht, td_unf, i, cellValue;
  var un_fact = document.getElementById('l_oad')
  select = document.getElementById('column_Height');
  option = select.options[select.selectedIndex];
  document.getElementById('value').value = option.text;
  document.getElementById('text').value = option.value;
  filter = parseInt(option.value);
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  filterUn = parseInt(un_fact.value);

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

    var filter = filterSearch(tr[i], option.text, option.value) || 
        filterUnF(tr[i], filterUn);
    tr[i].style.display =  filter ? "none" : "";
  }
}

注意：在您的代码 document.getElementById('l_Oad') 中，您使用的是零而不是字母 o。

在 for 中，我从 1 索引开始，因为我知道 0 是标题。

相似文章

javascript - table 主体不如 table 宽

我有一个table，其中第一列保持固定。我希望table可以垂直滚动。我想我已经接近了，下面几乎可以满足我的要求，唯一的问题是table行不如列宽，我不确定为什么？.tableth:first-chi...

javascripthtmlcss

c - c 程序处理 multithreading

我的c程序需要帮助，我已经完成了大部分，但还有一些问题。该计划是关于**探索进程和线程之间的同步。**在一个程序中给定了三(3)个流程，这些流程协同工作以解决生产者消费者问题：2个过程是“生产者”，每...

cmultithreading

热门标签

python(174470)javascript(115860)reactjs(56915)java(51402)c#(44719)html(38491)pandas(34032)r(30672)sql(30657)node.js(29831)c++(29442)typescript(27916)php(26333)flutter(25958)android(25817)css(25167)python-3.x(24280)arrays(22948)dataframe(21021)django(17716)c(17564)json(17224)angular(16718)mysql(15937)dart(14216)spring-boot(13879)postgresql(13433)amazon-web-services(13096)laravel(12778)list(12310)docker(11926)kotlin(11775)react-native(11399)mongodb(10993)swift(10939)jquery(10356)sql-server(10091)regex(9854)firebase(9595)vue.js(9439)string(9369)excel(9335)bash(9320)spring(9174).net(9082)linux(8971)numpy(8913)ios(8527)powershell(8245)azure(8079)vba(7673)

随机推荐

最新文章

Copyright © 2022-2023 - All Rights Reserved - www.ithao.net 京ICP备16047725号-12