Javascript 使用多个单选按钮筛选表格数据_Javascript_Html_Radio Button

Javascript 使用多个单选按钮筛选表格数据

javascript html

Javascript 使用多个单选按钮筛选表格数据,javascript,html,radio-button,Javascript,Html,Radio Button,我在表格中有一些数据： <table> <tr> <th>Month</th> <th>Savings</th> <th>Rate</th> </tr> <tr> <td>January</td> <td>$100</td> <td>5%</td> </tr> <tr>

我在表格中有一些数据：

<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>


月
储蓄
比率
一月
$100
5%
前进
$200
4%

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

一月至三月

全部-100美元-200美元

全部->4%->5%

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

我希望理解正确，但类似于这个问题：

我试着在小提琴手身上显示一个类似于您需要的划痕：

您必须实施范围控制

使用html5的IlGala的答案更好如果使用框架或库来处理绑定（如angularjs或knockoutjs），通常会更容易。试试看

问候

编辑：回答您的评论

你必须在这种条件下工作，试着在更简单的检查中拆分。实际上，绑定将帮助您。：）

if（price>val2&&price

我将混合使用HTML5数据标记和jquery

单选按钮应具有

数据第一值

和

数据第二值

，以便恢复范围。最糟糕的部分是检查行，因为有一些“复杂”的文本，而不仅仅是您要查找的值。但要实现你的目标还有很多

下面是一个代码的示例

$(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
        });
    });
});

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

编辑：：我做了一个oopsie，筛选了应该显示的内容。代码更新如下

我用一组单选按钮做了一个测试页面，但同样的逻辑也适用于一组新的单选按钮，它们的“name”属性就是您想要应用的过滤器

请参见下面的代码：


月
储蓄
比率
一月
$100
5%
前进
$200
4%
全部

一月

三月

$（“输入[type=radio]”）。更改（函数（）{
var filter=this.value；
如果（过滤器=“全部”）
$（“tr.dataRow”）.css（“可见性”、“可见”）；
else$（“tr.dataRow”）.css（“可见性”、“折叠”）；
var matchFound=false；
$（“tr.dataRow”）.find（“td”）.each（function（）{
$this=$（this）；
如果（！找到匹配项）{
if（$this.html（）==过滤器）{
matchFound=true；
$this.parent（）.css（“可见性”、“可见”）；
}
}
});
});

你能再解释一下你想完成什么吗？我想让它尽可能简单。我只想做几个单选按钮。选择这些单选按钮将过滤掉不符合这些按钮逻辑的数据行。比如一个范围，或者一个文本字符串。如何“搜索”表数据中包含正确内容的行，并根据所选单选按钮对其进行筛选？好的，现在我想我明白了。您希望RadioBox筛选您的表。是吗？是的，你能帮忙吗？：）您的表格数据是动态的吗？您能告诉我如何设置收音机选项，例如：最多60个，最多70个，最多90个。然后根据某列中的数字单元格内容隐藏行？请查看及其相对位置。看起来更难，但也没那么多，当项目变得更大时，你会恢复时间。

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

$(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
        });
    });
});

<!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>