JavaScriptでボタンをクリックする度に、テーブルの行、列が1行ずつ追加されていくようにするにはどうしたらいいでしょうか?ちなみにこのような事が書いてあるJavaScriptの本もお薦め頂けたら嬉しいです。しかし本は必須ではありません。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/09/04 12:50:44
  • 終了:2006/09/11 12:55:02

回答(2件)

id:Kenju No.1

Kenju回答回数30ベストアンサー獲得回数22006/09/04 13:13:34

ポイント35pt

方法は色々あるけど、個人的には createElement を使う方法が他にも応用がきいていいとおもう。

<script type="text/javascript">
function createTableRow(tableId, tdText)
{
  var tbodyElement = document.getElementById(tableId).getElementsByTagName("tbody")[0];
  var trElement = document.createElement("tr");
  var tdElement = document.createElement("td");
  var textNode = document.createTextNode(tdText);

  tdElement.appendChild(textNode);
  trElement.appendChild(tdElement);
  tbodyElement.appendChild(trElement);
}
</script>

<table id="table1">
 <tbody>
 <tr>
  <td>あいうえお</td>
 </tr>
 </tbody>
</table>

<input type="button" value="追加" onclick="createTableRow('table1', 'かきくけこ')">

http://q.hatena.ne.jp/1157341843

id:silverspring

うーむ、美しい。完璧です、ありがとうございます!

2006/09/04 23:07:49
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/09/04 15:58:24

ポイント35pt

簡易サンプルを作成してみました。

参考になりますでしょうか?

<html>

<head>

<title></title>

<script language="JavaScript"><!--

function addCol()

{

    var tableId = 'myTBL';

    var targetTable = document.getElementById(tableId);

    var colCount    = targetTable.rows[0].cells.length;

    if (navigator.userAgent.indexOf("Firefox") > -1) {

        targetTable.rows[0].insertCell(colCount);

        targetTable.rows[0].cells[colCount].textContent = "Hoge";

        targetTable.rows[1].insertCell(colCount);

        targetTable.rows[1].cells[colCount].textContent = "hoge1";

        targetTable.rows[2].insertCell(colCount);

        targetTable.rows[2].cells[colCount].textContent = "hoge2";

        targetTable.rows[3].insertCell(colCount);

        targetTable.rows[3].cells[colCount].textContent = "hoge3";

    }else{

        targetTable.rows[0].insertCell(colCount);

        targetTable.rows[0].cells[colCount].innerText = "Hoge";

        targetTable.rows[1].insertCell(colCount);

        targetTable.rows[1].cells[colCount].innerText = "hoge1";

        targetTable.rows[2].insertCell(colCount);

        targetTable.rows[2].cells[colCount].innerText = "hoge2";

        targetTable.rows[3].insertCell(colCount);

        targetTable.rows[3].cells[colCount].innerText = "hoge3";

    }

}

function addRow(){

    var tableId = 'myTBL2';

    var targetTable = document.getElementById(tableId);

    var rowCount    = targetTable.rows.length;

    var colCount    = targetTable.rows[0].cells.length;

    var row = targetTable.insertRow(rowCount);

    for (var j = 0; j < colCount; j ++) {

        var cell = row.insertCell(j);

        if (navigator.userAgent.indexOf("Firefox") > -1) {

            cell.textContent = "name"+rowCount;

        }else{

            cell.innerText = "name"+rowCount;

        }

    }

}

// --></script>

</head>

<body>

<a href="javaScript:addCol()">列を追加</a><br>

<table id="myTBL" border="1">

<tr><td>Name</td></tr>

<tr><td>name1</td></tr>

<tr><td>name2</td></tr>

<tr><td>name3</td></tr>

</table>

<br><br>

<a href="javaScript:addRow()">行を追加</a><br>

<table id="myTBL2" border="1">

<tr><td>Name</td></tr>

<tr><td>name1</td></tr>

<tr><td>name2</td></tr>

<tr><td>name3</td></tr>

</table>

</body>

</html>

※参考

http://www.yscjp.com/doc/table1.html

id:silverspring

うーむ、美しい。完璧です、ありがとうございます!

2006/09/04 23:07:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません