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

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

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

この記事の例では、非常に簡単な 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="テストテーブル">

>



复制代码代码如下:

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

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