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>

個人的に使いやすい