JS：特定の値がその行にある場合、特定のテーブル行を表示

Question

hereは、チェックボックスがチェクされたときに特定の行のみを表示しようとしています。

たとえば、チェックボックス2.5がチェクシングされている場合、値として2.5を含む行のみ。

私はテーブルのHTMLコードを編集することはできませんし、私はこのwithour結果のようなものを試してみました：

JS

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

HTML：（Iだけ<input> HTMLを編集することができます）

<input type="checkbox" name="rooms_check" value="2.5"> 
<input type="checkbox" name="rooms_check" value="3.5"> 
<input type="checkbox" name="rooms_check" value="4.5"> 

PS：私はWordpressを使用しています。

Answer 1

このコードが動作するはず：

$('input[name="rooms_check"]').change(
    function(){ 
    // a checkbox is clicked > display affected rows 
    if(0<$('input[name="rooms_check"]:checked').length){ 
     // hide all rowsin body 
     $('#tablepress-5 tbody tr').css('display', 'none'); 

     // display the rows with the correct values 
     $('input[name="rooms_check"]').each(function(){ 
     if($(this).prop('checked')) { 
      $('#tablepress-5 td:nth-child(2):contains("'+$(this).val()+'")').parent().css('display', 'table-row'); 
     } 
     }); 
    } 
    // no checkboxes clicked > display all rows 
    else{ 
     $('#tablepress-5 tbody tr').css('display', 'table-row'); 
    } 
}); 

フィドル：https://jsfiddle.net/5kt3fegy/
- それはテストのコード残りである - のonclick = "changeRowsを（）" HTML部分でフィドル-例では無視私は削除するのを忘れた... ;-)

注こと：私もいるので、あなたはそれがワードプレスうとしていることを、この記事のタグに言及する必要があります