アプリケーション開発では、次の数字など、従業員を登録したい実務経験など、いくつかの入力情報が動的です。
それが行き止まりになった場合、あなたは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>