checkboxでtable列の表示と非表示を実現
8532 ワード
<label style="margin-left: 10px">
<input type="checkbox" name="category" checked>
<input type="checkbox" name="category" checked>
<input type="checkbox" name="category">
</label>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
function showcategory(){
var category = document.getElementsByName("category");
var tab = document.getElementById("t");
var leng = category.length;
for(var j = 0;j<leng;j++){
console.log(category[j].checked);
if(category[j].checked){
var trs = tab.rows;
for(var i = 0, len = trs.length; i < len; i++){
var cell = trs[i].cells[j];
cell.style.display = 'table-cell';
}
}else{
var trs = tab.rows;
for(var i = 0, len = trs.length; i < len; i++){
var cell = trs[i].cells[j];
cell.style.display = 'none';
}
}
}
}
showcategory();
$("input[name='category']") .click(function(){
showcategory();
})
})
</script>
個人的に使いやすい