超级简单的jquery操作表格方法_jquery



本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下：

利用jquery给指定的table添加一行、删除一行
代码如下:

1	2	3
11	22	33

1

2

3

//在id为test的table的最后增加一行
function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");
tr_id++; //alert(tr_id);
str = "re1re2re3";
$('#'+id).append(str); } //删除id为test的table的最后一行
function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#'+tr_id).remove();
}


jQuery动态添加删除表格的行和列
代码如下:






var rowCount = 0;
var colCount = 2;
function addRow(){ rowCount++; var rowTemplate = ''+rowCount+'内容'+rowCount+'删除';
var tableHtml = $("#testTable tbody").html();
tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }
function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }
function 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(); });
colCount--;
}
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操作表格(添加/删除行、添加/删除列)
代码如下:






function 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); }); } function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); }); }

序号

内容

操作

代码如下:












选项1:删除
选项2:删除
选项3:删除
选项4:删除
选项5:删除

添加更多选项

$(document).ready(function(){//投票选项增减控制
var fatie = $("#fatie");
var option = 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:删除');
option = fatie.find(".options dd");
list_again();
})
option.find("a").live("click",function(){//删除选项
$(this).parent().remove();
list_again();
})
})

希望本文所述对大家的jquery程序设计有所帮助。