昨日、ページ上のテーブル行の動的追加と削除を行っていましたが、無数の紹介文を読んだ後、JQuery という良いものを発見しました。これは私がプラットフォームを使用する方法の 1 つです。
//追加された行数を記録します
var areaCount=1;
//テーブルの実際の行数を記録します
var rowCount=1;
//テンプレートhtmlを削除
var delRowTemplete = "
削除 | "; 🎜>
//テーブル行テンプレート
var addRowTemplete= "";
$(関数(){
//まず、クローンを作成する必要があるテンプレートを取り出します。テンプレートの行
idはrowTemplete_0
です。
addRowTemplete= $("#rowTemplete_0").html();
});
//行を追加
関数 addBatchRow(type){
var Templete = $("
|
");
//シリアル番号をインクリメントし、同じ ID を避けるために tr または td の [0]、_0、または (0) を置き換えます。この設計は主に背景値の便宜のためです
。
Templete = Templete.append(addRowTemplete.replace(/[0]/g,"[" areaCount "]").replace(/_0/g,"_" areaCount).
replace("processStat("0")","processStat(" areaCount ")"));
// 既存の最後の行を検索し、その後の行を結合します
var flag = false;
for(var i=areaCount-1;i>=0;i--){
if($("#rowTemplete_" i).length>0){ $("#rowTemplete_" i).after(templete.append(delRowTemplete));
休憩;}
}
//プラス 1 を数えます
エリア数 ; 行数 ;
}
//行を削除
function deleteBatchRow(obj){
if(rowCount>1) {
$(obj).parents("tr").remove();
行数--;
} elsealert("少なくとも 1 行を保持");//すべてが削除された場合、行を追加する方法はなくなり、テンプレート行も削除されます
}
//アイテム数を取得
関数 getAreaCount(){
rowCount を返す;
}
バックグラウンドでの使用も比較的簡単で、FormBean で配列変数を定義して取得および設定できるため、非常に便利です。