如何遍历表并让 td 元素遵循条件答案

【问题标题】：How to loop through a table and get the td elements to follow a condition如何遍历表并让 td 元素遵循条件
【发布时间】：2020-03-24 01:33:05
【问题描述】：

我只想让 tr 在 td 不符合要求时隐藏，尝试使用 jQuery 和 JavaScript，不知道出了什么问题。

$(document).ready(function(){
    $("td").each(function() {
        var id = $(this).attr("price_search");
        if (id > value4 && id < value5) {
            $(this).hide;
        }
        else {
            $(this).hide;
        }
    });         
});

【问题讨论】：

value4 value5 这些变量在哪里？
你能提供更多代码吗？我不明白 value4 value5 是什么
请添加 HTM 和其他变量，以便我们更好地为您提供帮助。
请将相关的 HTML 和缺少的 JS（值）作为minimal reproducible example 添加到您的问题中。
除此之外，$(this).hide()是jQuery Object的一个方法，括号是必须的。没有它们，你得到的只是该属性值中保存的函数代码。

标签： javascript jquery html loops html-table

【解决方案1】：

你可以这样做。

希望这会对您有所帮助。

$(document).ready(function() {
  var value4 = 2;
  var value5 = 4;
  $("td").each(function() {
    var id = $(this).attr("price_search");
    if (id > value4 && id < value5) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td price_search="3">10</td>
    <td price_search="2">20</td>
    <td price_search="3">30</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

我将在这里冒险，对不在问题中的内容做出广泛的假设。

您的.hide; 语法无效

您缺少两个变量 value4 和 value4 的值，坦率地说，它们根本不是很好命名的变量。我将假设这些名称更好，并且它们来自页面呈现期间的某个地方。

我假设您有一些想要通过这些高/低价格点过滤/隐藏的东西。

我假设属性可能包含需要解析的值（不是数字）

var lowerPricePoint = .45;
var upperPricePoint = 5.25;
$(function() {
  $("td").filter('[price_search]').each(function() {
    // parse out a price from perhaps formatted values
    let price = Number.parseFloat($(this).attr("price_search").replace(/\$|,/g, ''));
    // toggle visibility of the row
    $(this).closest('tr').toggle(price > lowerPricePoint && price < upperPricePoint);
  });
});

td {
  border: solid black 1px;
  padding: 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
  <tr>
    <td>Wear it</td>
    <td price_search="123.13">Shoes</td>
  </tr>
  <tr>
    <td>Drive it</td>
    <td price_search="$23,123.13">Car</td>
  </tr>
  <tr>
    <td>Drink it</td>
    <td price_search="3.13">Beet Juice</td>
  </tr>
  <tr>
    <td>Eat it</td>
    <td price_search="12.13">Can of expensive corn</td>
  </tr>
  <tr>
    <td>Cheap</td>
    <td price_search="35">Radish</td>
  </tr>
  <tr>
    <td>Use it</td>
    <td price_search="1.45">Paper towel</td>
  </tr>
  <tr>
    <td>Plain</td>
    <td price_search="$1.87">Butter</td>
  </tr>
  <tr>
    <td>Herb</td>
    <td price_search="$2.45">Butter</td>
  </tr>
  <tr>
    <td>Cheap</td>
    <td price_search="15">Gum</td>
  </tr>
</table>

【讨论】：