思路:遍歷被選中的checkbox對象→根據(jù)選中項篩選需要刪除的列對象→刪除篩選出的列。實(shí)例說明如下:
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)南沙免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了成百上千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
1、HTML結(jié)構(gòu)
table?id="test_table"
tr
tdinput?type="checkbox"?name="test"1/td
tdinput?type="checkbox"?name="test"2/td
tdinput?type="checkbox"?name="test"3/td
tdinput?type="checkbox"?name="test"4/td
tdinput?type="checkbox"?name="test"5/td
/tr
trtd1-1/tdtd1-2/tdtd1-3/tdtd1-4/tdtd1-5/td/tr
trtd2-1/tdtd2-2/tdtd2-3/tdtd2-4/tdtd2-5/td/tr
trtd3-1/tdtd3-2/tdtd3-3/tdtd3-4/tdtd3-5/td/tr
/table
input?type='button'?value='刪除'/
2、jquery代碼
$(function(){
$("input[type='button']").click(function()?{
$("input[name='test']:checked").each(function()?{?//?遍歷選中的checkbox
n?=?$(this).parent("td").index();??//?獲取checkbox所在列順序
$("table#test_table?tr").find("td:eq("+n+")").remove();
});
});
});
3、效果演示
都是通過選取節(jié)點(diǎn)刪除的,一種情況是點(diǎn)擊某一行刪掉,就要通過點(diǎn)擊事件獲取節(jié)點(diǎn),一種是在表外有個按鈕,這種情況就判斷刪你想刪的數(shù)字的行數(shù)就好了
很多問題其實(shí)可以在baidu.com找到,不過有時自己寫更有成就感。
根據(jù)你的標(biāo)題描述。
個人感覺說得不是很清晰。
給出一個例子,功能是點(diǎn)擊“刪除”將移除當(dāng)前點(diǎn)擊所在單元格的前一個tr。
trlen是獲取當(dāng)前table總有多少個tr。
如果trlen大于1則可以刪除,反之如果只剩下一個tr了不允許刪除。
其中.prev()是獲取上一個相鄰的元素。
相關(guān)的其他教程你可以去三體教程(santii.com)看一下。
先引入jquery,以下為實(shí)例代碼:
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("只剩下一行了不能刪除");
}
});
動態(tài)添加的對象,其事件也要動態(tài)綁定!
!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
$("ul li:eq(0)").remove(); //獲取 第一個 li元素 并刪除
$(".abc").remove() //刪除 class為abc的節(jié)點(diǎn)