html table tr 动态加减行操作

最新推荐文章于 2022-04-29 10:08:56 发布

weixin_34246551

最新推荐文章于 2022-04-29 10:08:56 发布

阅读量618

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/ccxj/blog/144206

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>table tr操作</title>

var rownnumber=1;

var addId = "tr_botton_1";

var trids=[];

trids[1]=addId;

function del(id){

if(addId == "tr_botton_1"){

return false;

}

if(rownnumber > 1){

trids[id]="";

id = "tr_botton_"+id;

if(id == addId){

/******查找上一个兄弟节点,下一个兄弟节点是next()*****/

addId = $("#"+addId).prev().attr("id");

}

var tr1=$("#tr1").attr("rowspan");

var tr2=$("#tr2").attr("rowspan");

$("#tr1").attr("rowspan",parseInt(tr1)-1);

$("#tr2").attr("rowspan",parseInt(tr2)-1);

$("#mytable").children().find("#"+id).remove();

$("#logs").html($("#logs").html()+"del addId:"+addId+"<br/>");

}

function add(){

rownnumber++;

var tr1=$("#tr1").attr("rowspan");

var tr2=$("#tr2").attr("rowspan");

$("#tr1").attr("rowspan",parseInt(tr1)+1);

$("#tr2").attr("rowspan",parseInt(tr2)+1);

$("#"+addId).after('<tr id="tr_botton_'+rownnumber+'"><td bgcolor="#FFFFFF">tr_botton_'+rownnumber+'</td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"> </td><td bgcolor="#FFFFFF"><a href="###" οnclick="del('+rownnumber+')">删除</a></td></tr>')

addId = "tr_botton_"+rownnumber;

trids[rownnumber]=addId;

$("#logs").html($("#logs").html()+"add addId:"+addId+"<br/>");

}

function save(){

var ids="";

for(var i in trids){

if(trids[i] != ""){

ids += trids[i]+"<br/>"

}

$("#logs").html($("#logs").html()+"<br/>"+ids);

}