人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: silverspring
●カテゴリ:コンピュータ インターネット
✍キーワード:JavaScript お薦め クリック ボタン
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Kenju
●35ポイント

方法は色々あるけど、個人的には 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

◎質問者からの返答

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


2 ● llusall
●35ポイント

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

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

<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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ