ホームページ  >  記事  >  ウェブフロントエンド  >  jquery_jquery を使用してテーブルに動的に行を追加するための実装コード

jquery_jquery を使用してテーブルに動的に行を追加するための実装コード

WBOY
WBOYオリジナル
2016-05-16 18:08:441153ブラウズ

ここではjqueryを使って実行します。キーコードは次のとおりです:

コードをコピー コードは次のとおりです:

//データ行を追加;
function AddRow(){
var vTb=$("#TbData");//テーブル ID=TbData の jquery オブジェクトを取得します
//すべてのデータ行には .CaseRow クラスがあります。 、データ行を取得します Size
var vNum=$("#TbData tr").filter(".CaseRow").size() 1;//テーブルにはデータ行が何行ありますか
var vTr= $("#TbData #trDataRow1 "); //テーブルの最初の行のデータを取得します
var vTrClone=vTr.clone(true); //最初の行のコピー オブジェクト vTrClone を作成します
vTrClone[ 0].id="trDataRow" vNum ;//最初の ID を現在の取得インデックスとして設定します。ID trDataRow1 の複数のデータ行が繰り返し追加されるのを防ぎます。
vTrClone.appendTo(vTb);/ /テーブルの下にコピーセルオブジェクトを追加します
}

このメソッドは主に jquery の clone 関数を使用して、テーブルの行コピーを複製します。次に、それを元のテーブルに追加します。
メソッドのキー コードの削除:
コードのコピー コードは次のとおりです:



vNum=$ ("#TbData tr").filter(".CaseRow").size() 1;//テーブルに含まれるデータ行数;
if(vNum<=2)
{
alert(' 少なくとも 1 行は残してください');
return;
}
var vbtnDel=$(this);// クリックされたボタン オブジェクトを取得します
var vTr=vbtnDel.parent ("td").parent ("tr");//親 tr オブジェクトを取得します。
if(vTr.attr("id")=="trDataRow1")
{
alert('最初の行は削除できません!') ; //最初の行はクローン作成のベースであるため削除できません
return
}else{
vTr.remove(); >
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。