html table tr 动态加减行操作
2013-07-12 11:12
162 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table tr操作</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
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="###" onclick="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);
}
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" id="mytable">
<tr>
<td rowspan="3" bgcolor="#FFFFFF" id="tr1">1</td>
<td rowspan="2" bgcolor="#FFFFFF" id="tr2">2</td>
<td bgcolor="#FFFFFF">3</td>
<td bgcolor="#FFFFFF">4</td>
<td bgcolor="#FFFFFF">5</td>
<td bgcolor="#FFFFFF">6</td>
<td bgcolor="#FFFFFF">7</td>
<td bgcolor="#FFFFFF">8</td>
<td bgcolor="#FFFFFF">9</td>
<td bgcolor="#FFFFFF">10</td>
<td bgcolor="#FFFFFF">11</td>
<td bgcolor="#FFFFFF">12</td>
<td bgcolor="#FFFFFF">13</td>
<td bgcolor="#FFFFFF">14</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF"><a href="###" onclick="save()">save</a></td>
</tr>
<tr id="tr_botton_1">
<td bgcolor="#FFFFFF">1</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="###" onclick="add()">add</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">合计</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"> </td>
</tr>
<tr>
<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"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
<div id="logs"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table tr操作</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
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="###" onclick="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);
}
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" id="mytable">
<tr>
<td rowspan="3" bgcolor="#FFFFFF" id="tr1">1</td>
<td rowspan="2" bgcolor="#FFFFFF" id="tr2">2</td>
<td bgcolor="#FFFFFF">3</td>
<td bgcolor="#FFFFFF">4</td>
<td bgcolor="#FFFFFF">5</td>
<td bgcolor="#FFFFFF">6</td>
<td bgcolor="#FFFFFF">7</td>
<td bgcolor="#FFFFFF">8</td>
<td bgcolor="#FFFFFF">9</td>
<td bgcolor="#FFFFFF">10</td>
<td bgcolor="#FFFFFF">11</td>
<td bgcolor="#FFFFFF">12</td>
<td bgcolor="#FFFFFF">13</td>
<td bgcolor="#FFFFFF">14</td>
<td bgcolor="#FFFFFF">15</td>
<td bgcolor="#FFFFFF"><a href="###" onclick="save()">save</a></td>
</tr>
<tr id="tr_botton_1">
<td bgcolor="#FFFFFF">1</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="###" onclick="add()">add</a></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">合计</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"> </td>
</tr>
<tr>
<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"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
<div id="logs"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery动态表格(转自：http://www.cnblogs.com/Zjmainstay/archive/2012/07/12/jQuery_autoAddDeleteTableTr.html)
- 动态操作html table
- 使用jquery动态往table添加tr
- jquery 对table的一些操作 怎么获取tr下的第二个td元素？
- HTML中表格元素TABLE,TR,TD及属性的语法
- jquery动态往table添加tr
- 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作
- ajax动态增加html节点时，jqm样式未加载出来，须实现refresh操作
- 一段js动态操作table代码
- js 操作table之 移动TR位置 兼容FF 跟 IE
- js 动态创建table tr加事件
- jq根据table的tr行数动态删除相应的行
- jQuery 操作动态加载的html 元素
- html标签的表格的tbody、tfoot、thead、colgroup、th、tr、td、table
- html中表格的动态操作
- HTML--通过JavaScript操作HTML的Table
- html---textarea初始化时就有个table空格以及tab键操作无效
- javascript DOM操作之动态删除TABLE多行
- 关于html中table表格tr,td的高度和宽度
- 【转】js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）