No.1
30
2
35pt
方法は色々あるけど、個人的には createElement を使う方法が他にも応用がきいていいとおもう。
47
44
<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', 'かきくけこ')">
No.2
50561
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>
※参考
うーむ、美しい。完璧です、ありがとうございます！
1
4
2
うーむ、美しい。完璧です、ありがとうございます！