Question

我在表格中有一些数据：

<table>
<tr>
 <th>Month</th>
 <th>Savings</th>
 <th>Rate</th>
</tr>
<tr>
 <td>January</td>
 <td>$100</td>
 <td>5%</td>
</tr>
<tr>
 <td>March</td>
 <td>$200</td>
 <td>4%</td>
</tr>
</table>

我想使用具有以下逻辑的单选按钮：

全部 - 1月 - 3月
全部 - $ 100 - $ 200
全部 - > 4％ - > 5％

我如何使用JavaScript搜索表数据，并根据多个单选按钮的输出显示行而不仅仅是一行？

Answer 1

编辑：我做了一个oopsie，我过滤了应该显示的内容。代码在下面更新。

我用一组单选按钮做了一个测试页面，但是相同的逻辑适用于一组新的单选按钮，其“name”属性是你想要应用的过滤器。

请参阅以下代码：http://jsfiddle.net/3mdc7ppb/2/

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="TblRates">
<tr class="headerRow">
 <th>Month</th>
 <th>Savings</th>
 <th>Rate</th>
</tr>
<tr class="dataRow">
 <td>January</td>
 <td>$100</td>
 <td>5%</td>
</tr>
<tr class="dataRow">
 <td>March</td>
 <td>$200</td>
 <td>4%</td>
</tr>
</table>
<input type="radio" name="Month"  value="All" checked="checked" />All<br/>
<input type="radio" name="Month"  value="January"/>January<br/>
<input type="radio" name="Month"  value="March"/>March<br/>

<script>
$("input[type=radio]").change(function(){
    var filter = this.value;
    if (filter == "All")
        $("tr.dataRow").css( "visibility", "visible" );
    else $("tr.dataRow").css( "visibility", "collapse" );
    var matchFound = false;
    $("tr.dataRow").find("td").each(function() {
      $this = $(this);
      if (!matchFound){
          if ($this.html() == filter){
            matchFound = true;
            $this.parent().css( "visibility", "visible" );
          }
      }
    });
});
</script>
</body></html>

Answer 2

我希望理解正确，但与此问题类似：

radio-button-filter-using-jquery-javascript

我尝试在类似于您的需求的小提琴中显示划痕：jsfiddler

$('tr').each(function() {
        ...
});

您必须实施范围控制。

使用html5的IlGala答案更好

如果使用框架或库来处理绑定（例如angularjs或knockoutjs），通常会容易得多。试试看！

此致

编辑：回答您的评论

你必须在条件下工作，试着分开更简单的检查。真的，绑定会帮助你。：）

if (price > val2 && price < val3 || ...){
    $(this).show();
} else {
    $(this).hide();
}

Answer 3

我会混合使用HTML5数据标签和jquery。

单选按钮应该有data-first-value和data-second-value才能恢复范围。最糟糕的部分是检查行，因为有一些“复杂”的文本，而不仅仅是你正在寻找的值。但是有很多examples来实现你的目标。

这是一个代码看起来如何的示例。

$(document).ready(function() {
    $(".radio").click(function() {        
        // hide all table rows

        // Get the rest of checked radios
        var checkedRadios = $('.radio:checked');

        // Iterate the checked radios
        $.each(checkedRadios, function(idx, element){
            // Table rows filter:
            // 1) iterate the rows
            // 2) if the table respects the filter => show
        });
    });
});

这是隐藏/显示所需结果的最简单方法之一。

使用多个单选按钮过滤表数据

3 个答案:

使用html5的IlGala答案更好