insertRow() メソッド
定義と使用法
insertRow() メソッドは、テーブル内の指定された位置に新しい行を挿入するために使用されます。
文法
tableObject.insertRow(インデックス)
戻り値
新しく挿入された行を表す TableRow を返します。
説明する
このメソッドは、新しい <tr> タグを表す新しい TableRow オブジェクトを作成し、それをテーブルの指定された位置に挿入します。
新しい行はインデックスの行の前に挿入されます。インデックスがテーブル内の行数と等しい場合、新しい行がテーブルの末尾に追加されます。
テーブルが空の場合、新しい行は新しい <tbody> セクションに挿入され、それ自体がテーブルに挿入されます。
投げる
パラメーターのインデックスが 0 未満、またはテーブル内の行数以上の場合、このメソッドはコード INDEX_SIZE_ERR の DOMException 例外をスローします。
例
次のようにコードをコピーします。
<html>
<頭>
<script type="text/javascript">
関数 insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</head>
<本文>
<テーブル id="myTable">
<tr>
<td>行1 セル1</td>
<td>行 1 セル 2</td>
</tr>
<tr>
<td>行 2 セル 1</td>
<td>行 2 セル 2</td>
</tr>
</テーブル>
<br />
<input type="button" onclick="insRow()"
value="新しい行を挿入">
</body>
</html>
deleteCell()
定義と使用法
deleteCell() メソッドは、テーブル行のセル (<td> 要素) を削除するために使用されます。
文法
tablerowObject.deleteCell(インデックス)
説明する
パラメータのインデックスは、削除するテーブル要素の行内の位置です。
このメソッドは、テーブル行内の指定された位置にあるテーブル要素を削除します。
投げる
パラメーターのインデックスが 0 未満であるか、行内のテーブル要素の数以上である場合、このメソッドはコード INDEX_SIZE_ERR の DOMException 例外をスローします。
例
次のようにコードをコピーします。
<html>
<頭>
<script type="text/javascript">
functiondelRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<本文>
<テーブル id="myTable">
<tr>
<td>行1 セル1</td>
<td>行 1 セル 2</td>
</tr>
<tr>
<td>行 2 セル 1</td>
<td>行 2 セル 2</td>
</tr>
</テーブル>
<br />
<input type="button" onclick="delRow()"
value="最初の行を削除">
</body>
</html>
挿入セル()
定義と使用法
insertCell() メソッドは、HTML テーブルの行の指定された位置に空の <td> 要素を挿入するために使用されます。
文法
tablerowObject.insertCell(インデックス)
戻り値
新しく作成され挿入された <td> 要素を表す TableCell オブジェクト。
説明する
このメソッドは、新しい <td> 要素を作成し、それを行の指定された位置に挿入します。新しいセルは、index で指定された位置に現在配置されているセルの前に挿入されます。インデックスが行内のセルの数と等しい場合、新しいセルが行の末尾に追加されます。
このメソッドは <td> データ テーブル要素のみを挿入できることに注意してください。行にヘッダー要素を追加する必要がある場合は、Document.createElement() メソッドと Node.insertBefore() メソッド (または関連メソッド) を使用して <th> 要素を作成し、挿入する必要があります。
投げる
パラメーターのインデックスが 0 未満であるか、行内のテーブル要素の数以上である場合、このメソッドはコード INDEX_SIZE_ERR の DOMException 例外をスローします。
例
次のようにコードをコピーします。
<html>
<頭>
<script type="text/javascript">
関数 insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="ジョン"
}
</script>
</head>
<本文>
<テーブル>
<tr id="tr1">
<th>名</th>
<th>姓</th>
</tr>
<tr id="tr2">
<td>ピーター</td>
<td>グリフィン</td>
</tr>
</テーブル>
<br />
<input type="button" onclick="insCell()" value="セルの挿入">
</body>
</html>
deleteCell()
定義と使用法
deleteCell() メソッドは、テーブル行のセル (<td> 要素) を削除するために使用されます。
文法
tablerowObject.deleteCell(インデックス)
説明する
パラメータのインデックスは、削除されるテーブル要素の行内の位置です。
このメソッドは、テーブル行内の指定された位置にあるテーブル要素を削除します。
投げる
パラメータのインデックスが 0 未満、または行内のテーブル要素の数以上の場合、このメソッドはコード INDEX_SIZE_ERR の DOMException 例外をスローします。
例
次のようにコードをコピーします。
<html>
<頭>
<script type="text/javascript">
functiondelCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<本文>
<テーブル>
<tr id="tr1">
<th>名</th>
<th>姓</th>
</tr>
<tr id="tr2">
<td>ピーター</td>
<td>グリフィン</td>
</tr>
</テーブル>
<br />
<input type="button" onclick="delCell()" value="セルの削除">
</body>
</html>
プロジェクト内のアプリケーション:
次のようにコードをコピーします。
<script type="text/javascript">
vartrIndex = 0;
//動的に行を追加
関数 appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var クラス名;
if(null!=sel){
for(var i = 0; i < sel.options.length; i++){
if(sel.options[i].selected)
className=sel.options[i].value;
}
}
// データは ajax、json 形式から取得されます。
Convert.getConvertBean2Json(クラス名,
関数(結果) {
var obj = eval('('+result+')');
var table = document.getElementById("convertTable");
var newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='Delete' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' 値='"+obj.name+">";
if(null!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
「パラメータ名:」+obj.paramList[i].name+
";パラメータの種類:"+obj.paramList[i].type+
"; パラメーター値: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+''>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
trIndex++;
});
}
//行を削除
deleteRow(r){ で
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
trIndex--;
}
</script>