Question

问题

如何使用javascript过滤HTML表中的行，以仅显示列值在输入范围内的行。

表格（PHP，HTML）

我有一个table，其值使用以下PHP代码从SQL数据库（SQL fiddle）中获取：

$sql = "SELECT name, price, id, mark, value, url FROM cpu";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table id='myTable'><tr><th>CPU</th><th>Price</th><th>Mark</th><th>Value</th><th>Image</th></tr>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr><td><a href='https://au.pcpartpicker.com/product/".$row["id"]."' target='_blank'>" . $row["name"]. "</a></td><td>" . $row["price"]."</td><td>" . $row["mark"]."</td><td>" . $row["value"]."</td><td><img src=". $row["url"]." height='42' width='42'></td></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

输入（HTML）

在网页上，我还有两个HTML输入框，一个用于搜索，一个用于价格：

<input type="number" id="myPrice" onkeyup="myFunction()" placeholder="Enter amount.." title="Type in a amount" min="0">
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search for cpus.." title="Type in a cpu name">

搜索过滤（JavaScript）

对于搜索过滤，我使用以下javascript代码：

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("mySearch");
  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";
      }
    }       
  }
}

但是我不确定应该为myPrice使用什么代码。我相信，首先我必须将price列转换为字符串，然后执行过滤器。我不确定确切的代码，但是设法找到了this，看起来很相似。

我是新手，我知道我没有太多的代码，但是如果您甚至可以将我指出正确的方向，那就太好了。

更新：

我认为这段代码将通过删除“ $”并将其转换为浮点数来将价格转换为浮点数，我对此是否正确？

var price = str.slice(1,5);
var price = parseFloat(price)

更新2：

function myPriceFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myPrice");
  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];
    td = td.slice(1,5);
    td = parseFloat(td)
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

我认为我需要为输入上下的10％创建2个变量，然后检查td是否在输入范围内？

更新3：

function myPriceFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myPrice");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  priceLow = input * 0.9
  priceHigh = input * 1.1
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    td = td.slice(1,5);
    td = parseFloat(td)
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > priceLow and txtValue.toUpperCase().indexOf(filter) < priceHigh ) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

这是我认为我需要的所有代码，但是它不起作用，可能是td的处理，因为文本没有浮动但我不确定。如果任何人都能提供任何见解，那都是很棒的。

如果您需要更多信息，请随时询问。

谢谢

在数字范围之间进行过滤以隐藏表格行（HTML，JavaScript）

0 个答案: