文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >HTML组合了两个筛选脚本

问HTML组合了两个筛选脚本
EN

Stack Overflow用户
提问于 2022-05-14 13:19:05
回答 1查看 57关注 0票数 0

我有两个过滤器，一个是=>greater than或=greater。

我如何将它们合并成一个代码，以便它们一起工作？

谢谢

​

代码语言：javascript
运行
复制
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";
        }
      }
    }
  }
代码语言：javascript
运行
复制
* {
  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;   
}
代码语言：javascript
运行
复制
<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>

​

javascript
html
EN

回答 1

Stack Overflow用户

发布于 2022-05-14 17:11:10

好的，您可以创建分隔的函数来告诉您什么时候过滤一行，或者不过滤。每个函数都有检查筛选器所需的行和其他参数：

代码语言：javascript
运行
复制
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);
  }
}

然后，迭代所有行，并对每一行检查它是否传递筛选器：

代码语言：javascript
运行
复制
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是头。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72240597

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档