Kaedah jquery super mudah untuk mengendalikan tables_jquery

Contoh dalam artikel ini menerangkan kaedah pengendalian jadual jquery yang sangat mudah. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Gunakan jquery untuk menambah baris dan memadamkan baris pada jadual yang ditentukan

Salin kod Kod adalah seperti berikut: 1 2 3 11 22 33 td width="30%">1 2 3 //Tambahkan baris di hujung jadual dengan ujian id fungsi addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); tr_id; //alert(tr_id); str = " re1 re2 re3 "; $('#' id).append(str); } //Padam baris terakhir jadual dengan ujian id fungsi deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#' tr_id).remove(); }

jQuery menambah dan memadam baris dan lajur jadual secara dinamik Salin kod Kod adalah seperti berikut: .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } var rowCount = 0; var colCount = 2; function addRow(){ rowCount ; var rowTemplate = ' ' rowCount ' 内容' rowCount ' 删除 '; var tableHtml = $("#testTable tbody").html(); tableHtml = rowTemplate; $("#testTable tbody").html(tableHtml); } fungsi delRow(_id){ $("#testTable .tr_" _id).hide(); rowCount--; } function addCol(){ colCount ; $("#testTable tr").setiap(fungsi(){ var trHtml = $(this).html(); trHtml = ' 增加的td '; $(this).html(trHtml); }); } fungsi delCol(_id){ $("#testTable tr").setiap(function(){ $("td:eq(" _id ")",this).hide(); }); colCount--; } fungsi penggerak(_id){ $("#testTable tr:not(:first)").setiap(function(){ $("td:eq(" _id ")",this).removeClass("cl1"); $("td:eq(" _id ")",this).addClass("cl2"); }); } function mout(_id){ $("#testTable tr:not(:first)").setiap(function(){ $("td:eq(" _id ")",this).removeClass("cl2"); $("td:eq(" _id ")",this).addClass("cl1"); }); } jquery操作表格测试 序号 内容 操作 jquery操作表格(添加/删除行、添加/删除列)

复制代码 代码如下: jquery操作表格测试 fungsi del(_id){ $("#testTable .tr_" _id).html(''); var tableTr = $("#testTable .tr_" _id).hide(); } function addRow(){ var addRowTemplete = ' ' tableCount ' 内容' tableCount ' 删除 '; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){ var trHtml = " 曾加的td "; $(this).append(trHtml }); } fungsi delCol(_id){ $("#testTable tr").setiap(function(){ $("td:eq(" _id ")",this).hide(); }); } 序号 内容 操作

复制代码 代码如下: Laman Web Rasmi Kedai Pakaian Wanita Saya Satu Peratus|Komuniti Baicaiyuan|4000-921001|Hanya Suka Satu Peratus Pilihan 1 : Pilihan 2 : Pilihan 3 : Pilihan 4 : Pilihan 5 : Tambah lebih banyak pilihan

$(document).ready(function(){//pilihan mengundi menambah atau mengurangkan kawalan var fatie = $("#fatie"); var option = fatie.find(".options dd"); function list_again(){//Pilihan susun semula option.each(function(){ var i = $(this).index(); $(this).find("span").html(i 1); }) } fatie.find(".add_opt span").klik(function(){//Tambah pilihan fatie.find(".options").append(' Options i : Padam '); pilihan = fatie.find(".options dd"); list_again(); }) option.find("a").live("click",function(){//Delete option $(this).parent().remove(); list_again(); }) }) Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.