Question

我正在测试此table，并且在检查checkbox时我试图隐藏一些行。

例如在我的情况下：当选中复选框3.5时，包含Zimmer 2.5和4.5的表行是隐藏。

或者例如，如果选中复选框2.5，则Zimmer 3.5或4.5的表格行不可见。

我试图给一个复选框一个数据编号但没有...

我尝试了<input type="checkbox" data-number="3.5" />

有什么想法吗？

编辑：

我试过像这样的JS：

jQuery(document.body).on('change', "#row2", function() { 
jQuery("#tablepress-id-5 tr.row2").toggle(!this.checked); 
});

Answer 1

你应该反过来做 - 复选框应该有一个基于它代表的数字的值，表格行可以有一个数据属性来表示房间数。

<input type="checkbox" name="rooms_check" value="2">
<input type="checkbox" name="rooms_check" value="3">
<input type="checkbox" name="rooms_check" value="4">
<table>
    <tr data-number="2">
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
    </tr>
    <tr data-number="3">
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
        <td>Value</td>
    </tr>
</table>

然后用JS：

$('input[name="rooms_check"]').change(function(){
    $('input[name="rooms_check"]').each(function(){
        if(!$(this).prop('checked')) {
            $('tr[data="'+$(this).val()+'"]').hide();
        } else {
            $('tr[data="'+$(this).val()+'"]').show();
        }
    });
});

<强>更新

以下是如何在不更改表格的情况下执行此操作。

$('input[name="rooms_check"]').change(function(){
    $('input[name="rooms_check"]').each(function(){
        if(!$(this).prop('checked')) {
            $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').hide();
        } else {
            $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').show();
        }
    });
});

Answer 2

我相信当您单击复选框并使预期的行消失时，某些javascript应该会触发。你有相关的JavaScript吗？

Answer 3

嗨A Casa尝试此代码

$('input[type=checkbox]').on('change',function(e){
v=$(this).val();
$('td:contains("+v+")').parent('tr').toggle()
})

选中复选框时隐藏表格行

3 个答案: