资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jquery删除表格,jquery删除表格行两个parent只删除了一个单元格

JQuery中的remove()删除表格中的行求解

动态添加的对象,其事件也要动态绑定!

康马网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、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

关于JQuery语句删除表格列

$(".table thead tr th:nth-child(2)").hide()

$(".table thead tr th::eq(1)").hide()

这两种都可以  这样就隐藏了

jQuery删除表格行且只保留前第一行 求解决 麻烦啦

很多问题其实可以在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("只剩下一行了不能删除");

}

});

如何用jquery实现动态删除表格行

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();//移除当前的元素

});

});

jquery有选择性的增加和删除表格

不懂太你的描述~

页面上面的三张表格是隐藏的?

点击增加按钮的时候,是把隐藏的表格显示?

点击删除按钮的时候,是把显示的表格隐藏?

补充:

以下为页面控件概述:

三个表格控件:

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


网页题目:jquery删除表格,jquery删除表格行两个parent只删除了一个单元格
文章位置:http://cdkjz.cn/article/dsohepo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220