掲示板/JavaScript質問板/過去ログ/一覧/ DOMを使ってtableを伸縮

0 名前： やまねこ ： 2007/01/23（火） 13:27 ID:/f2DP3IZ sub-O4: DOMを利用してテーブルの行を増やしたり減らしたりしたいのですが、
どういう訳かうまくいきません。。

FireFoxでは、一見、ちゃんと動くのですが・・・
行を増やしてから減らすと、妙なテーブル内部の隙間が
増殖してしまいます。

ＩＥでは、まったくなにも起こりません。。

なにか、よい解決方法、ありませんでしょうか。。？

以下のようなコードを書いてみました；

<html>
<body>

<script language="JavaScript">
var rows = 1 ;

function plus() {
　　　var table = document.getElementById( "table" ) ;
　　　var row = document.getElementById( "row1" ) ;
　　　row = row.cloneNode( true ) ;
　　　row.id = "row" + ( ++rows ) ;
　　　table.appendChild( row ) ;
}

function minus() {
　　　if ( rows > 1 ) {
　　　　　　var table = document.getElementById( "table" ) ;
　　　　　　var row = document.getElementById( "row" + ( rows-- ) ) ;
　　　　　　table.removeChild( row ) ;
　　　}
}
</script>

<form>
<table border="1" id="table">
　　　<tr id="row1">
　　　　　　<td>
　　　　　　　　　<input type="text" name="col1-1" />
　　　　　　</td>
　　　　　　<td>
　　　　　　　　　<input type="text" name="col2-1" />
　　　　　　</td>
　　　</tr>
</table>
<input type="button" value="　▼　" onClick="plus()" />
<input type="button" value="　▲　" onClick="minus()" />

</form>

</body>
</html>

1 名前： NullPo ： 2007/01/23（火） 13:27 ID:Z0FHbpib sub-ii

手元にFireFoxがないのでIE6.0で確認。

<script type="text/javascript">
window.rows = 1;

function plus()
{
  var table = document.getElementById("table").getElementsByTagName("tbody")[0];
  var row = document.getElementById("row1");

  row = row.cloneNode(true);
  row.id = "row" + (++window.rows);

  table.appendChild(row);
}

function minus()
{
  if( window.rows > 1 ) {
  var table = document.getElementById("table").getElementsByTagName("tbody")[0];
    var row = document.getElementById("row" + window.rows--);

    table.removeChild(row);
  }
}
</script>

<form>

<table border="1" id="table">
 <tr id="row1">
  <td>
   <input type="text" name="col1-1">
  </td>
  <td>
   <input type="text" name="col2-1">
  </td>
 </tr>
</table>

<input type="button" value="　▼　" onclick="plus()">
<input type="button" value="　▲　" onclick="minus()">
</form>

2 名前： やまねこ ： 2007/01/23（火） 13:27 ID:/f2DP3IZ sub-O4: なるほど！
tableとtrの間にtbodyなんてエレメントがあったのですね。
うまくいきそうです。ありがとうございました！