DOMを使ってtableを伸縮

[新着] Webテンプレートを仮オープンしました



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

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

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

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

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

<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なんてエレメントがあったのですね。
うまくいきそうです。ありがとうございました!

一覧へ戻る