Question

我一直在使用下面的Jquery Table过滤器代码，它完全按照我的需要工作。现在我需要添加两个我不知道该怎么做的选项。过滤器仅在名为＆＃34; Materials Ordered＆＃34;的表列中进行过滤。如果它在id =＆＃34;＆＃34;中找到了确切的文本，那就是显示的表行。

我需要添加的是以下内容，仍然只是查看同一列：

1）添加名为“Open”的新过滤器选项，该选项应该： - 显示除所有4种产品（Backsplash，Carpet，Tile＆Wood）之后的N / A或订单日期的记录以外的所有记录

2）添加名为“已关闭”的新过滤器选项，该选项应显示： - 仅显示所有4种产品（Backsplash，Carpet，Tile＆amp; Wood）之后有N / A或订单日期的记录

<input type="radio" id="" name="Materials Ordered" /> All
<input type="radio" id="Tile NOT" name="Materials Ordered" checked="checked">Tile
<input type="radio" id="Carpet NOT" name="Materials Ordered" /> Carpet
<input type="radio" id="Wood NOT" name="Materials Ordered" /> Wood
<input type="radio" id="Backsplash NOT" name="Materials Ordered" /> Backsplash

以下是当前过滤的小提琴：https://jsfiddle.net/aL6141dq/

<script>
$(document).ready(function () {

$('input[type="radio"]').change(function () {
var name = $('input[name="name"]:checked').prop('id') || '';
var position = $('input[name="Materials Ordered"]:checked').prop('id') || '';
$('tbody tr').hide();
$('tbody tr:contains(' + name + ')').show();
$('tbody tr').not(':contains(' + position + ')').hide();
});

});
</script>

这是第二个选项的主旨：

(if Backspash tabletext = "Backspash mm/dd/yyyy" OR "Backspash N/A"
AND
if Carpet tabletext = "Carpet mm/dd/yyyy" OR "Carpet N/A"
AND
if Tile tabletext = "Tile mm/dd/yyyy" OR "Tile N/A"
AND
if Wood tabletext = "Wood mm/dd/yyyy" OR "Wood N/A")
{
SHOW Table Row)
}

Answer 1

好吧，我没有对此进行过测试，但似乎您可以执行以下操作：

$('tbody tr').filter(function() {
  var matches = $(this).find('td').filter(function() {
    var val = $(this).text(),
        prefix = this.id.substring(0, this.id.length - 4) + ' ',
        datePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/,
        suffix;

    if (val.substring(0, prefix.length) === prefix) {
        suffix = val.substring(prefix.length);
        if (suffix === 'N/A' || suffix.match(datePattern)) {
            return true;
        }
    }
    return false;
  }).length;

  return option === 'Closed' ? matches === 4 : matches !== 4;
}).show();

我们的想法是查看每行中的表格单元格，过滤那些符合条件的单元格，然后计算结果。该代码通过从ID中删除尾随的“NOT”来提取有效值的开始（例如“Tile”）。然后测试剩下的字符，看它们是“N / A”还是日期（显然可能有更广泛的日期检查）。

然后可以检查一行中匹配单元格的数量，以查看哪些条件为真，并相应地show()。

Answer 2

我现在有了答案。

<input checked="checked" id="" name="Materials Ordered" type="radio"> All
<input id="openOrders" name="Materials Ordered" type="radio"> Open
<input id="closedOrders" name="Materials Ordered" type="radio"> Closed
<input id="Tile NOT" name="Materials Ordered" type="radio"> Tile
<input id="Carpet NOT" name="Materials Ordered" type="radio"> Carpet
<input id="Wood NOT" name="Materials Ordered" type="radio"> Wood
<input id="Backsplash NOT" name="Materials Ordered" type="radio"> Backsplash

<script>
$(document).ready(function() {
$('input[type="radio"]').change(function() {
    $('tbody tr').show();
    var position = $('input[name="Materials Ordered"]:checked').prop('id') || '';
    if (position === 'openOrders') {
        $('tbody tr').not(':contains("NOT")').hide();
    } else if (position === 'closedOrders') {
        $('tbody tr:contains("NOT")').hide();
    } else {
        $('tbody tr').not(':contains(' + position + ')').hide();
    }
});
});
</script>

Jquery表过滤器修改

2 个答案: