Javascript 如何根据所选值减去表格单元格过滤HTML表格';s值

Javascript 如何根据所选值减去表格单元格过滤HTML表格';s值,javascript,html,jquery,html-table,Javascript,Html,Jquery,Html Table,我想根据选定的值从数据库中筛选表的显示 我想通过比较整数/字符串值,在每行的第7个单元格索引小于选定值时显示表行 我发现了许多匹配或包含条件的示例,但我无法确定小于或大于,目前我的代码显示了表,但工作不正常 我很高兴接受jQuery,如果它也能工作的话 <table id="carTable" class="table table-striped"> <thead> <tr class="header"> <th>ID<

我想根据选定的值从数据库中筛选表的显示

我想通过比较整数/字符串值,在每行的第7个单元格索引小于选定值时显示表行

我发现了许多匹配或包含条件的示例,但我无法确定小于或大于,目前我的代码显示了表,但工作不正常

我很高兴接受jQuery,如果它也能工作的话

<table id="carTable" class="table table-striped">
  <thead>
    <tr class="header">
      <th>ID</th>
      <th>Make</th>
      <th>Model</th>
      <th>Type</th>
      <th>Seats</th>
      <th>Color</th>
      <th>Location</th>
      <th>Price/Day
        <select id='filterText' style='display:inline-block' onchange='filterPrice()'>
            <option value="all" selected>All</option>
            <option value='69'> < 69 </option>
            <option value='100'> < 100 </option>
            <option value='200'> < 200 </option>
            <option value='500'> < 500 </option>
        </select>
      </th>
    </tr>
  </thead>
  <tbody id="carsTable">
    {%for car in cars%}
    <tr>
      <td>{{ car[0] }}</td>
      <td>{{ car[1] }}</td>
      <td>{{ car[2] }}</td>
      <td>{{ car[3] }}</td>
      <td>{{ car[4] }}</td>
      <td>{{ car[5] }}</td>
      <td>{{ car[6] }}</td>
      <td>{{ car[7] }}</td>
    </tr>
    {%endfor%}
  </tbody>
</table>

身份证件
制作
模型
类型
座位
颜色
位置
价格/天
全部的
< 69 
< 100 
< 200 
< 500 
{车中车的百分比%}
{{car[0]}
{{car[1]}
{{car[2]}
{{car[3]}
{{car[4]}
{{car[5]}
{{car[6]}
{{car[7]}
{%endfor%}
我的函数如下所示

function filterPrice() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("filterText");
    filter = input.value;
    table = document.getElementById("carTable");
    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 = tr[i].getElementsByTagName("td")[7];
      if (td) {
        cellValue = td.innerHTML;
        if (cellValue <= filter) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
      }
    }
  }
函数过滤器价格(){
//声明变量
var输入、过滤器、表格、tr、td、i、TXT值;
输入=document.getElementById(“filterText”);
filter=input.value;
table=document.getElementById(“carTable”);
tr=table.getElementsByTagName(“tr”);
//循环遍历所有表行,并隐藏与搜索查询不匹配的行
对于(i=0;i如果(cellValue通过先转换为整数然后比较来固定,这要归功于@isherwood

function filterPrice() {
    // Declare variables
    var input, filter, table, tr, td, i, cellValue;
    input = document.getElementById("filterText");
    filter = parseInt(input.value);
    table = document.getElementById("carTable");
    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 = tr[i].getElementsByTagName("td")[7];
      if (td) {
        cellValue = parseInt(td.innerHTML);
        if (cellValue <= filter) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
      }
    }
  }
函数过滤器价格(){
//声明变量
var输入、过滤器、表格、tr、td、i、cellValue;
输入=document.getElementById(“filterText”);
filter=parseInt(input.value);
table=document.getElementById(“carTable”);
tr=table.getElementsByTagName(“tr”);
//循环遍历所有表行,并隐藏与搜索查询不匹配的行
对于(i=0;iif(cellValue)您的主要问题是您正在比较字符串。请在比较之前将它们转换为整数或浮点数。omg,非常感谢,我在这方面花了3个小时……我添加了parseInt()它就像一个符咒,谢谢你。我还认为你搜索
tr
应该针对
tbody
,而不是整个表。很好。一定要接受这个答案来解决这个问题。