ホームページ > 記事 > ウェブフロントエンド > 超簡単なjqueryテーブル操作method_jquery

超簡単なjqueryテーブル操作method_jquery

WBOYオリジナル: 2016-05-16 16:26:561340ブラウズ

この記事の例では、非常に簡単な jquery テーブルの操作方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

jquery を使用して、指定されたテーブルに行を追加し、行を削除します

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

<スクリプトタイプ="text/javascript">
var rowCount = 0;
varcolCount = 2;
関数 addRow(){ 行数 ; var rowTemplate = '' rowCount '内容' rowCount '删除';
var tableHtml = $("#testTable tbody").html();
tableHtml = rowTemplate; $("#testTable tbody").html(tableHtml); }
関数 delRow(_id){ $("#testTable .tr_" _id).hide();行数--; }
関数 addCol(){colCount ; $("#testTable tr").each(function(){
var trHtml = $(this).html(); trHtml = '追加td';
$(this).html(trHtml);
});
}
function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq(" _id ")",this).hide(); });
列数--;
}
function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl1");
$("td:eq(" _id ")",this).addClass("cl2"); }); }
function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl2");
$("td:eq(" _id ")",this).addClass("cl1"); }); }
jquery 操作表格测试

jquery操作表格(追加/删除行、追加/删除列)

复制代码代码如下:

<頭>

jquery 操作表格测试

<スクリプトタイプ="text/javascript">

function del(_id){ $("#testTable .tr_" _id).html('');

var tableTr = $("#testTable .tr_" _id).hide(); }

function addRow(){ var addRowTemplete = '

'; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){ var trHtml = ""; $(this).append(trHtml); } function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq(" _id ")",this).hide(); }); }

<テーブル幅="487" ボーダー="1" id="テストテーブル">

复制代码代码如下:

<頭>

My One Percent 婦人服店公式ウェブサイト|Baiaiyuan Community|4000-921001|Just Love One Percent

オプション1:

オプションを追加

<スクリプトタイプ="text/javascript">
$(document).ready(function(){//投票オプションの増減制御
var fatie = $("#fatie");
var オプション = fatie.find(".options dd");
function list_again(){//オプションの並べ替え
option.each(function(){
var i = $(this).index();
$(this).find("span").html(i 1);
})
}
fatie.find(".add_opt span").click(function(){//オプションを追加
fatie.find(".options").append('

オプションi:削除

');
オプション = fatie.find(".options dd");
list_again();
})
option.find("a").live("click",function(){//オプションを削除
$(this).parent().remove();
list_again();
})
})

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：node.js_node.js での fs.unlink メソッドの使用手順次の記事：node.js_node.js での fs.unlink メソッドの使用手順

続きを見る

序号	内容	操作
' tableCount '	内容' tableCount '	删除
曾加的td
序号	内容	操作

超簡単なjqueryテーブル操作method_jquery

関連記事