アプリケーション開発では、次の数字など、従業員を登録したい実務経験など、いくつかの入力情報が動的です。
それが行き止まりになった場合、あなたは3つしか記入できません、それが4である場合はどうなりますか？それ以上、それを追加することは不可能ではありませんか？これは良くありません。下の図に示すように、テーブルの行を動的に追加し、行を追加して、より柔軟な情報の行を入力できます。
この効果を達成するためにASPとASP.NETでJavaScriptを組み合わせる方法を見てみましょう。
まず第一に、テーブルを動的に追加することは、フォアグラウンドに実装されています。次のステーションが利用可能な場合は可能かもしれませんが、Ajaxが使用される場合があります。これは非常に面倒なので、JavaScriptを使用してそれらを実装するのが最善です。以下は、テーブルの行を動的に追加する2つの方法です。
最初のタイプ：ソースコード
JavaScript：
<script type = "text/javascript">/** // *この関数は、1つの行を動的に追加するために使用されます * tabobj：ターゲットテーブル * colnum：テーブルの行の列の数 * sorpos：新しい行のソース。 * Targpos：新しい行が追加される位置。 * */ function addrow（tabobj、colnum、sorpos、targpos）{var ntr = tabobj.insertrow（tabobj.rows.length-targpos）; // //指定された位置に新しい行を指定されたテーブルに挿入します。 var trs = tabobj.getelementsbytagname（ 'tr'）; //指定されたテーブルからTRSコレクションを取得var sortr = trs [sorpos]; // sortr var tds = sortr.getelementsbytagname（ 'td'）を配置しました。 //指定された行からTDSコレクションを取得するif（colnum == 0 || colnum == undefined || colnum == isnan）{colnum = tabobj.rows [0] .cells.length; } var ntd = new Array（）; //（var i = 0; i <colnum; i ++）{// tds tds in ow ntd [i] = ntr.insertcell（）; //新しいセルntd [i] .id = tds [0] .idを作成します。 // TDのIDを新しいセルにコピーします。 |注意！ TDSの//接尾辞はntd [i] .innerhtml = tds [i] .innerhtml;に任命する必要があります。 // TDのIDを新しいセルにコピーします。 |注意！ TDSの//接尾辞はntd [i] .innerhtml = tds [i] .innerhtml;に任命する必要があります。 //対応するTDSからNTD [i]のinnerhtmlで値をコピーする}/** // *この関数は、指定されたテーブルで指定された行を削除するために使用されます * tabobj：任命されたテーブル * targpos：ターゲットの行の位置 * btnobj：現在クリックされている画像ボタン */関数削除電子（btnobj） i <tabobj.rows.length; i ++）{if（tabobj.getelementsbytagname（ 'img'）[i] == btnobj）{tabobj.deleterow（i+targpos）; }}}} </script>HTML
<表ID = TabuserInfo border = 1> <tr> <td> name </td> <td> gender </td> <td> age </td> <td> <td> host </td> <td> delete </td> </tr> <tr style = "display：none" = truserinfo> <td id = tduseriNfo> > </td> <td id = tduserinfo> <input id = usersex name = usersex> </td> <td id = tduserinfo> <input id = userage name = userage> </td> <td id = tduserinfo> <input id = userlove nam onclick = "leterow（document.all.tabuserinfo、1、this）"> </td> </tr> <tr> <td> <入力タイプ=ボタン値= "add" onclick = "addrow（all.all.tabuserinfo、null、1,1）"> </td> </the table> </td> </td>