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

連番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() 」の第一引数に元の数字、第二引数には桁数を入れます。