jQueryの.index() .prepend()メソッドで要素の先頭に番号(インデックス)を振りたい
例えばこのようなリストがあり、
曲名の頭に曲番号を振りたいという場合。
| MP3 曲目リスト | ||
| 曲名 | 収録時間 | DL |
| 故郷 | 1:28 | |
| 春の小川 | 2:36 | |
| 朧月夜 | 3:55 | |
| ABC | ||
まず、htmlの準備から。
対象となる表と曲名が書かれているセルを特定するためtableタグに"snglist"、tdタグに"sngmnam"とそれぞれクラス名を付ける。
<table class="snglist" border="1">
<tr>
<td colspan="3">MP3 曲目リスト</td>
</tr>
<tr>
<td>曲名</td>
<td>収録時間</td>
<td>DL</td>
</tr>
<tr>
<td class="sngmnam">故郷</td>
<td>1:28</td>
<td> </td>
</tr>
<tr>
<td class="sngmnam">春の小川</td>
<td>2:36</td>
<td> </td>
</tr>
<tr>
<td class="sngmnam">朧月夜</td>
<td>3:55</td>
<td> </td>
</tr>
<tr>
<td class="sngmnam">ABC</td>
<td> </td>
<td> </td>
</tr>
</table>
jQueryは以下の通り。
$(function(){
$(".snglist").find("td.sngmnam").prepend(function(index, html){
return index+1+". ";
});
});
ついでに一行加えてtableをゼブラ模様にし、見やすくする。
$(".snglist tr:odd").css("background-color","#eeeeee") ;
ソース全体は以下。
$(function(){
$(".snglist tr:odd").css("background-color","#eeeeee") ;
$(".snglist").find("td.sngmnam").prepend(function(index, html){
return index+1+". ";
});
});
参考サイト
