189 8069 5689
动态添加的对象，其事件也要动态绑定！
康马网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站等网站项目制作，到程序开发，运营维护。成都创新互联公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。
!DOCTYPE html
html
head
meta charset="UTF-8"
title添加与删除/title
script src="js/jquery-1.8.3.min.js"/script
script
var n=1;
$(function(){
$("button").click(function(){
var btn=$("input type='button' value='删除'/");
btn.click(function(){
$(this).closest("tr").remove();
});
$("tbody").append($("trtd"+n+"/tdtd新添加的表格/td/tr").append($("td/td").append(btn)));
n++;
});
});
/script
/head
body
button添加表格/button
table border="1px"
tbody
/tbody
/table
/body
/html
$(".table thead tr th:nth-child(2)").hide()
$(".table thead tr th::eq(1)").hide()
这两种都可以 这样就隐藏了
很多问题其实可以在baidu.com找到，不过有时自己写更有成就感。
根据你的标题描述。
个人感觉说得不是很清晰。
给出一个例子，功能是点击“删除”将移除当前点击所在单元格的前一个tr。
trlen是获取当前table总有多少个tr。
如果trlen大于1则可以删除，反之如果只剩下一个tr了不允许删除。
其中.prev()是获取上一个相邻的元素。
相关的其他教程你可以去三体教程(santii.com)看一下。
先引入jquery，以下为实例代码：
table width="100%" border="1" class="tb"
tr
td1/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td2/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td3/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td4/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td5/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td6/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td7/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td8/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td9/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td10/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
tr
td11/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
tdspan class="del"删除/span/td
/tr
/table
$("span.del").click(function(){
var trlen=$(".tb").find("tr").length;
if (trlen1){
$(this).parent().parent().prev().remove();
}else{
alert("只剩下一行了不能删除");
}
});
table
tr class="tr-line"
td第一行第一列/tdtd第一行第二列/td
/tr
tr class="tr-line"
td第二行第一列/tdtd第二行第二列/td
/tr
/table
$(function(){
//给table的行赋值click事件，点击行即删除该行
$(".tr-line").click(function(){
$(this).remove();//移除当前的元素
});
});
不懂太你的描述~
页面上面的三张表格是隐藏的？
点击增加按钮的时候，是把隐藏的表格显示？
点击删除按钮的时候，是把显示的表格隐藏？
补充：
以下为页面控件概述：
三个表格控件：
table id="table1"/table
table id="table2"/table
table id="table3"/table
一个下拉菜单控件：
select id="select1"/select
一个增加按钮：
input type="button" id="btnAdd" /
一个删除按钮：
input type="button" id="btnDelete" /
以下为js代码：
$(function () {
var $select1 = $("#select1");
var $tempTables = $(); //用于缓存table
//为select增加所有table列表
$("table").each(function () {
var id = $(this).attr("id");
$select1.append($("option/option").val(id).text(id));
});
//为增加按钮绑定事件
$("#btnAdd").click(function () {
//克隆选择的table，并去除id
var cloneTable = $("#" + $select1.val()).clone().removeAttr("id");
//加入页面中
$("body").append(cloneTable);
//加入缓存中
$tempTables = $tempTables.add(cloneTable);
});
//为删除按钮绑定事件
$("#btnDelete").click(function () {
//移除所有新增的table
$tempTables.remove();
//重置缓存
$tempTables = $();
});
});
代码纯手打~没测试过~有问题你给我说~应该没问题~
希望对您有帮助~
By Billskate