WEBOPIXEL

jQueryでテーブルに連番idの列(カラム)を追加する

Posted: 2011.04.22 / Category: javascript / Tag: 

テーブルで何かのリストを作成するとき、連番idを割り振りたいときがたまにあります。
しかし、htmlで直に1.2.3…と書くのは大変だし、後で3番を削除したいとなった場合すべて打ち直さなくてはいけないので泣きそうになりますね。
そんなときはjQueryが簡単に連番IDを割り振ってくれます。

Sponsored Link

連番idカラムを追加するシンプルな例

たとえばこんなテーブルがあります。

html

 
		<table id="sample">
			<tr>
				<td>果物</td>
				<td>オレンジ</td>
			</tr>
			<tr>
				<td>果物</td>
				<td>パイナップル</td>
			</tr>
			<tr>
				<td>野菜</td>
				<td>キャベツ</td>
			</tr>
		</table>
	

jQueryは次のようになります。
「prepend」で一番要素の最初(左の列)に追加します。
eachは0から始まるのでi+1にすることで「1」から表示するようにします。

javascript

 
	$(function() {
		$('#sample tr').each(function(i) {
			$(this).prepend('<td>'+ (i+1) +'</td>'); 
		});
	});
	

最初の行にthがある例

テーブルの最初にはタイトル(th)を入れることが多いですよね。
次は最初の行にthがあった場合の処理です。

html

 
		<table id="sample">
			<tr>
				<th>種類</th>
				<th>名称</th>
			<tr>
			</tr>
				<td>果物</td>
				<td>オレンジ</td>
			</tr>
			.
			.
			.
		</table>
	

繰り返し回数が0回(最初の行)だったら「id」という文字列でthを追加、それ以外だったら連番を追加します。

javascript

 
	$(function() {
		$('#sample tr').each(function(i) {
			if(i != 0) {
				$(this).prepend('<td>'+ i +'</td>'); 
			} else {
				$(this).prepend('<th>id</th>'); 
			}
		});
	});
	

最初のthで1つカウントされてますのでi+1する必要はないですね。

idの桁数をそろえる

1とか10とか100とか桁数がばらばらだとかっこ悪いですよね。
ちょっと脱線しますが、桁数の低い物は先頭に0を付ける処理をして揃えてみます。

javascript

 
	function convertNum(num, figures) {
		var str = String(num);
		while (str.length < figures) {
			str = "0"+str;
		}
		return str;
	}
	$(function() {
		$('#sample tr').each(function(i) {
			if(i != 0) {
				$(this).prepend('<td>'+ convertNum(i, 3)  +'</td>'); 
			} else {
				$(this).prepend('<th>id</th>'); 
			}
		});
	});
	

「convertNum() 」の第一引数に元の数字、第二引数には桁数を入れます。

参考サイト: 【JavaScript】数値の桁を”0″で埋めて揃える