テーブルを動的に追加および削除するための JQuery メソッド rows_jquery

この記事の例では、JQuery を使用してテーブルの行を動的に追加および削除する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

昨日、ページ上のテーブル行の動的追加と削除を行っていましたが、無数の紹介文を読んだ後、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 で配列変数を定義して取得および設定できるため、非常に便利です。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。