テーブルにはいくつかの行があります:var trcnt = table.rows.length; (テーブルはIDです)
各行にはいくつの列がありますか:for(var i = 0; i <trcnt; i ++)
table.rows [i] .cells.length;
JavaScript操作テーブル:
insertrow()、leleterow()、insertcell()、deletecell()メソッド
table.insertrow()はIEでは問題ありませんが、Firefoxではテーブルに変更する必要があります。
同様に、対応するINSERTCELL()もINSERTCELL(-1)に変更する必要があります
Insertrow()メソッド
定義と使用法
InserTrow()メソッドは、表の指定された位置に新しい行を挿入するために使用されます。
文法
tableObject.insertrow(index)
返品値
新しく挿入された行を示すタブローを返します。
説明します
この方法は、新しいTableRowオブジェクトを作成し、新しい<TR>タグを表し、テーブル内の指定された位置に挿入します。
新しいラインは、インデックスラインの前に挿入されます。インデックスがテーブル内の行数に等しい場合、新しい行はテーブルの最後に追加されます。
テーブルが空の場合、新しい行が新しい<tbody>セグメントに挿入され、それ自体がテーブルに挿入されます。
捨てる
パラメーターインデックスがテーブル内の行数以上が0以下の場合、このメソッドはコードindex_size_errでドームイクセプションの例外をスローします。
例
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
関数insrow()
{
document.getElementById( 'myTable')。insertrow(0)
}
< /script>
< /head>
<body>
<表ID = "myTable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
< /tr>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
< /tr>
< /table>
<br />
<入力型= "ボタン" onclick = "insrow()"
value = "新しい行を挿入">
< /body>
< /html>
deletecell()
定義と使用法
deletecell()メソッドは、テーブル行のセル(<td>要素)を削除するために使用されます。
文法
TableRowObject.deleteCell(index)
説明します
パラメーターインデックスは、行で削除されるテーブル要素の位置です。
このメソッドは、テーブル行の指定された位置にあるテーブル要素を削除します。
捨てる
パラメーターインデックスが行のテーブル要素よりも0以下の場合、このメソッドはコードindex_size_errでドームオクセプションの例外をスローします。
例
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
関数delrow()
{
document.getElementById( 'myTable')。leterow(0)
}
< /script>
< /head>
<body>
<表ID = "myTable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
< /tr>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
< /tr>
< /table>
<br />
<入力型= "ボタン" onclick = "delrow()"
value = "最初の行を削除">
< /body>
< /html>
insertcell()
定義と使用法
insertCell()メソッドは、HTMLテーブルの行の指定された位置に空の<TD>要素を挿入するために使用されます。
文法
tableRowObject.insertcell(index)
返品値
新しく作成および挿入された<TD>要素を表すテーブルチェルオブジェクト。
説明します
この方法は、新しい<TD>要素を作成し、行の指定された位置に挿入します。新しいセルは、現在インデックスの指定された位置にあるテーブル要素の前に挿入されます。インデックスが行のセルの数に等しい場合、新しいセルは行の最後に追加されます。
この方法は、<td>データテーブル要素のみを挿入できることに注意してください。ヘッダー要素を行に追加する必要がある場合は、document.createelement()メソッドとnode.insertbefore()メソッド(または関連方法)を使用して<th>要素を作成して挿入する必要があります。
捨てる
パラメーターインデックスが行のテーブル要素よりも0以下の場合、このメソッドはコードindex_size_errでドームオクセプションの例外をスローします。
例
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
関数inscell()
{
var x = document.getElementById( 'TR2')。insertCell(0)
x.innerhtml = "John"
}
< /script>
< /head>
<body>
<表>
<tr id = "tr1">
<th> firstName </th>
<th> lastName </th>
< /tr>
<tr id = "tr2">
<td> peter </td>
<td> griffin </td>
< /tr>
< /table>
<br />
<入力型= "ボタン" onclick = "inscell()" value = "insert cell">
< /body>
< /html>
deletecell()
定義と使用法
deletecell()メソッドは、テーブル行のセル(<td>要素)を削除するために使用されます。
文法
TableRowObject.deleteCell(index)
説明します
パラメーターインデックスは、行で削除されるテーブル要素の位置です。
このメソッドは、テーブル行の指定された位置にあるテーブル要素を削除します。
捨てる
パラメーターインデックスが行のテーブル要素よりも0以下の場合、このメソッドはコードindex_size_errでドームオクセプションの例外をスローします。
例
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript">
関数delcell()
{
document.getElementById( 'TR2')。deletecell(0)
}
< /script>
< /head>
<body>
<表>
<tr id = "tr1">
<th> firstName </th>
<th> lastName </th>
< /tr>
<tr id = "tr2">
<td> peter </td>
<td> griffin </td>
< /tr>
< /table>
<br />
<入力型= "ボタン" onclick = "delcell()" value = "delete cell">
< /body>
< /html>
プロジェクトのアプリケーション:
コードコピーは次のとおりです。
<script type = "text/javascript">
var trindex = 0;
//行を動的に増やします
unction appentconvert(){
// var sel = document.getElementById( "SelectConvertName");
var sel = document.getElementsByname( "SelectConvertName")[0];
var className;
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(className、
関数(結果){
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 = 'leterow(this)'>";
newRow.InsertCell(1).innerhtml = "<入力タイプ= 'text' name = 'convertlist ["+trindex+"]。id'> <入力型= 'hidden' name = 'convertlist ["+trindex+"]。名前' value = '"+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>"+
「<入力型= 'hidden' name = 'convertlist ["+trindex+"]。paramlist ["+i+"]。name' value = '"+obj.paramlist [i] .name+"'> "+
「<入力型= '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')。leterow(i);
Trindex--;
}
</script>