<script type="text/javascript">
$(function(){
/******实现全选的操作****/
$("#chks").click(function(){
//获得当前框的勾选状态
var flag= $("#chks").prop("checked");
$("input[name='chk']").prop('checked',flag);
})
/******实现是否全部勾选的效果*****/
$("input[name='chk']").click(function(){
//获得所有的单个的勾选框
var inps =$("input[name='chk']");
/*for(var i in inp){
console.log(inp[i]);
}*/
var flag=true;
inps.each(function(){
//循环体
if(!$(this).prop('checked')){
//证明至少有一个框没有被勾选
flag=false;
return;
}
})
$("#chks").prop('checked',flag);
})
/********实现反选的效果***********/
$("#fx").click(function(){
var inps =$("input[name='chk']");
inps.each(function(){
//当前多选框的状态
var flag= $(this).prop('checked');
$(this).prop("checked",!flag)
})
})
/*****新增一行数据********/
$("#addRow").click(function(){
$("#ta").append('<tr>'+
'<td><input type="checkbox" name="chk" id="" value="4" /></td>'+
'<td>《web开发详解》</td>'+
'<td>刘老师</td>'+
'<td>30</td>'+
'</tr>')
})
/*****移除指定的数据****/
$("#delRow").click(function(){
//获得所有被选中的多选框
var v =$("input[name='chk']:checked");
if(v.length==0){
alert("请至少勾选一行数据")
}else{
//parent()--获得当前节点的父节点
v.parent().parent().remove();
}
})
/******赋值行的操作*******/
$("#copyRow").click(function(){
//获得被勾选的input
var v =$("input[name='chk']:checked");
if(v.length==0){
alert("请至少选择一行进行复制");
}else {
//赋值一行
var tr=v.parent().parent().clone();
//把复制的行黏贴到指定的表格中
$("#ta").append(tr)
}
})
})
</script>
</head>
<body>
<h3>jQuery操作表格</h3>
<hr />
<input type="button" id="fx" value="反选" />
<input type="button" id="addRow" value="新增一行" />
<input type="button" id="delRow" value="删除行" />
<input type="button" id="copyRow" value="复制行" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
<td width="200px">书名</td>
<td width="200px">作者</td>
<td width="200px">数量</td>
</tr>
<tr id="">
<td><input type="checkbox" name="chk" id="" value="2"/></td>
<td>《Java编程之道》</td>
<td>wollo</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="3" /></td>
<td>《Python和我的故事》</td>
<td>赵老师</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="4" /></td>
<td>《web开发详解》</td>
<td>张老师</td>
<td>30</td>
</tr>
</table>
jQuery 表格实现
最新推荐文章于 2024-03-18 21:12:53 发布
3335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
