JSでTableの列を消したり表示したりする

久しぶりに書こうかなと。

仕事でwebベースの業務系の開発とかしています。

テーブルViewは一覧表示の基本なので列を見せたり消したりするのは割と需要あるっていうかできたらいいよなぁと思いサンプルを作って見ました。

js側

$(document).on("click", ".viewRow", function(){
	var id = "#"+$(this).data("id");
	var flag = $(this).prop('checked');
	var index = $("#target thead tr th").index($(id));
	$($("#target")[0].rows).each(function(i){
		if(flag){
			$($(this)[0].cells[index]).hide();
		}else{
			$($(this)[0].cells[index]).show();
		}
		
	});
});

html側はtbodyとかをとりあえず表示しておきました。

<label>
	<input type="checkbox" class="viewRow" data-id="target_row_1" selected>
	列1
</label>
<label>
	<input type="checkbox" class="viewRow" data-id="target_row_2" selected>
	列2
</label>
<label>
	<input type="checkbox" class="viewRow" data-id="target_row_3" selected>
	列3
</label>
<table id="target">
	<thead>
		<tr>
			<th id="target_row_1">列1</th>
			<th id="target_row_2">列2</th>
			<th id="target_row_3">列3</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>1-1</td>
			<td>1-2</td>
			<td>1-3</td>
		</tr>
		<tr>
			<td>2-1</td>
			<td>2-2</td>
			<td>2-3</td>
		</tr>
	<tbody>
</table>

簡単ですがこんな感じです。 うまいことidをDBのカラム名とかにしてツールとか作りたいですね。

Searcherとかtable_sorterとかと組み合わせて便利にしたいなぁ

うまいことhtml要素とかをブログに貼るのが一番めんどくさかったです。もし見た人がいい記法知っていたらこっそり教えてください