1、删除内容功能
$(".del").on("click", function() {
//当你checkbox为选择状态时,不能进行删除
if ($(this).parent("td").siblings(".in").children(".box")[0].checked) {
alert("不能删除");
} else {
// console.log($(this).parent("td").siblings(".in").children(".box")[0].checked);
var name = $(this).parent("td").siblings(".name")[0].innerHTML;
console.log(name);
var age = $(this).parent("td").siblings(".age")[0].innerHTML;
console.log(age);
$(this).parent("td").siblings(".name,.age").html("");
// console.log( $(".del").siblings());
}
})
1.1、删除的效果
2、 删除整行功能
$("#tb").on("click",".delete",function(){
if ($(this).parent("td").siblings(".in").children(".box")[0].checked) {
alert("不能删除");
}else{
//找到父节点的父节点,把整个表格的整行删除
$(this).parent().parent().remove();
}
})
3.增加功能
$("#btn0").on("click",function(){
var name = prompt("请输入要添加的名字");
var age = prompt("请输入要添加的年纪");
var typearr=["success","active","warning","danger","info"];
var index= Math.floor(Math.random()*4);
var type=typearr[index];
//在倒数第二行插入一行数据
//通过两个id选择器,再加上基本的选择器
$("#tb #btn").before(
"<tr class="+type+">"+
"<td class="+'in'+"> <input type="+'checkbox'+" class="+'box'+" /> </td>"
+"<td class="+'name'+">"+name+"</td>"+
"<td class="+'age'+">"+age+"</td>"+
"<td><a href="+'#'+" class="+'del'+">删除内容</a> <a href="+'#'+" class="+'update'+">修改内容</a> <a href="+'#'+" class="+'delete'+">刪除整行</a></td>"+
"</tr>"
);
});
输入名字与名字:
****日积月累,慢慢成长****