JavascriptでTableを操作
内容
タイトル通りJavascriptでTableを操作してみた。
ソースコード
https://gist.github.com/892316
<html> <head> <title>javascript table</title> <script type="text/javascript"> function onload() { var table = document.getElementById("t"); for(var i = 0; i < 20; i++ ) { var row = table.insertRow(-1); var number = row.insertCell(-1); var content = row.insertCell(-1); number.innerHTML = i + 1; content.innerHTML = "a"; } } </script> </head> <body onload="onload()"> <p>javascriptでtableを操作</p> <table border="4" id="t"> <tr> <th>No.</th> <th>内容</th> </tr> </table> </body> </html>
メモ
insertRow(index)メソッドはindex番目に行を追加する。
indexは上を0番目とする。-1を指定したら、一番下の行が指定される。
insertCell(index)メソッドはindex番目にセルを追加する。
insertRowメソッド同様に-1を指定したら、一番右端が指定される。
参考サイト
Tableを操作するのに役立った http://qune.cside.com/archives/000559.html
insertRowメソッドを理解できた http://jsajax.com/Articles/tablerowinsertcell/167
insertCellメソッドを理解できた http://jsajax.com/Articles/tablerowinsertcell/167