jqueryを使って動的にテーブルの列を隠す$（オブジェクト）

Question

私は2つの列とカスタムプロパティ "data-cid"を持つ単純なテーブルを持っています。私はdata-cid proerptyに基づいて列を非表示にしたい。上記のブラウザで

$(document).ready(function() { 
 
    $("th[data-cid='Col_17']").each(function(index, obj) { 
 
    if ($(obj).prop("className") == "") 
 
     $(obj).attr("class", "hide-elem"); 
 
    else 
 
     $(obj).addClass("hide-elem"); 
 
    }); 
 

 
} 
 
$("td[data-colId='Col_17']").each(function(index, obj) { 
 
    if ($(obj).prop("class") == "") 
 
    $(obj).attr("class", "hide-elem"); 
 
    else 
 
    $(obj).addClass("hide-elem"); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th data-cid="Col_18">sadf</th> 
 
     <th data-cid="Col_17">asdf</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td data-cid="Col_18">sadf</td> 
 
     <td data-cid="Col_17">sadf</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

私の目とTDにクラスを追加することができませんでした。誰かが私に何が悪いのを助けることができる？

Answer 1

問題： -

あなたは

はこれを試してみてください、あなたのコード内の余分な}を持っている： -

$(document).ready(function() { 
 
    $("th[data-cid='Col_17'], td[data-cid='Col_17']").each(function(index, obj) { 
 
      if($(obj).prop("className") == ""){ 
 
       $(obj).attr("class", "hide-elem"); 
 
      }else{ 
 
       $(obj).addClass("hide-elem"); 
 
      } 
 
     }); 
 

 
     
 
     
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
<thead> 
 
<tr><th data-cid="Col_18">sadf</th> 
 
<th data-cid="Col_17">asdf</th></tr> 
 
</thead> 
 
<tbody> 
 
<tr><td data-cid="Col_18">sadf</td> 
 
<td data-cid="Col_17">sadf</td></tr> 
 
</tbody> 
 
</table>

Answer 2

あなたは2つのループの間に余分な}を持っています。しかし、両方のセレクタを一緒に配置することによって、それらを単一のループに単純に組み合わせることができます。 tdセレクタにタイプミスがあり、data-cidではなくdata-colIdでした。

$(document).ready(function() { 
 
    $("th[data-cid='Col_17'], td[data-cid='Col_17']").each(function(index, obj) { 
 
    if ($(obj).prop("className") == "") 
 
     $(obj).attr("class", "hide-elem"); 
 
    else 
 
     $(obj).addClass("hide-elem"); 
 
    }); 
 
});

.hide-elem { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th data-cid="Col_18">sadf</th> 
 
     <th data-cid="Col_17">asdf</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td data-cid="Col_18">sadf</td> 
 
     <td data-cid="Col_17">sadf</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

あなたは1つの余分}を持っているし、あなたのjqueryのセレクタが間違っています。それは$("th[data-cid='Col_17']")代わり$("th[data-cid='Col_17']")でなければなりません

$(document).ready(function() { 
 

 
$("th[data-cid='Col_17']").each(function(index, obj) { 
 
    if ($(obj).prop("className") == "") 
 
     $(obj).attr("class", "hide-elem"); 
 
    else 
 
     $(obj).addClass("hide-elem"); 
 
    }); 
 
    
 
    
 
$("td[data-cid=Col_17]").each(function(index, obj) { 
 

 
    if ($(obj).prop("class") == "") 
 
    $(obj).attr("class", "hide-elem"); 
 
    else 
 
    $(obj).addClass("hide-elem"); 
 
}); 
 
});

.hide-elem{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border=1> 
 
    <thead> 
 
    <tr> 
 
     <th data-cid="Col_18">sadf</th> 
 
     <th data-cid="Col_17">asdf</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td data-cid="Col_18">sadf</td> 
 
     <td data-cid="Col_17">sadf</td> 
 
    </tr> 
 
    </tbody> 
 
</table>