5

1 列と約 10 行のテーブルがあります。最初の列には、行ヘッダーとしてテキストを含む行、「ヘッダー 1」、「ヘッダー 2」があります。2 番目の列には、ユーザーがデータを入力するためのフィールド (テキストボックスとチェックボックス) が含まれています。

上部に「新規追加... 」というラベルの付いたボタンを配置し、最初の列と同じフィールドを持つ 3 番目の列を作成します。ユーザーがもう一度クリックすると、フィールドを含む別の空白の列が作成されます (2 番目の列のように)。

これを達成するためにDOMを操作する効果的な方法を知っている人はいますか?

私は と を試してdivいTABLESますが、これを始めて 3 日目ですが、必要以上に難しく感じます。

4

2 に答える 2

3

面白いエクササイズ。AviewAnewさんのヒントのおかげで、できました。

function AddColumn(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;
  // Take care of header
  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var newcell = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(newcell);
  // Add the remainder of the column
  for(var i = 1; i < rowNb; i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(newcell);
  }
}

次の HTML を使用:

<input type="button" id="BSO" value="Add" onclick="javascript:AddColumn('TSO')"/>
<table border="1" id="TSO">
<thead>
<tr><th>Fields</th><th>Data</th></tr>
</thead>
<tbody>
<tr><td>Doh</td><td>10</td></tr>
<tr><td>Toh</td><td>20</td></tr>
<tr><td>Foo</td><td>30</td></tr>
<tr><td>Bar</td><td>42</td></tr>
<tr><td>Ga</td><td>50</td></tr>
<tr><td>Bu</td><td>666</td></tr>
<tr><td>Zo</td><td>70</td></tr>
<tr><td>Meu</td><td>80</td></tr>
</tbody>
</table>
于 2008-10-03T21:01:39.217 に答える
2

の線に沿った何か

function(table)
{
  for(var i=0;i<table.rows.length;i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(true);
    table.rows[i].appendChild(newcell);
  }
}
于 2008-10-03T20:12:16.633 に答える