您的位置：首页 > 产品设计 > UI/UE

jquey实现的动态表格的新增及删除行

2015-09-30 15:25 211 查看

以下为使用jquey实现的动态表格的新增及删除行

<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//添加一行操作
$("#addrow").click(function(){
var len= $("#showtblSys tr").length
var typechoice ="<input type='radio' name='ModifyType"+len+"' onclick= setCheckBox(this) value='1'>" +"新增</input><input  type='radio' name='ModifyType"+len+"' onclick= setCheckBox(this)  value='0'>修改</input><input   type='radio' name='ModifyType"+len+"' onclick= setCheckBox(this) value='-1'>注销</input>"
var str="<tr><td><input  type='checkbox' value='showfirstValue"+len+"'  name='tabletr' onclick='changeState(this)' id='perrow"+len+"'>"+len+"行</input></td><td>"+typechoice+"</td><td><input type='text' value='efg'></input></td></tr>";
$("#showtblSys").append(str);
});

//全选按钮操作
$("#checkAllSysid").click(function(){
var $this = $(this);
if(this.checked){
$("input[name='tabletr']").not(":checked").trigger("click");
$("input[name='tabletr']").attr("checked",'true');
}else{
$("input[name='tabletr']:checked").trigger("click");
$("input[name='tabletr']").removeAttr("checked");
}
}) ;
//删除按钮操作
$("#deleterow").click(function(){
$("input[name='tabletr']:checked").parent("td").parent("tr").remove();
$("#showtblSys tr").each(function(){
$(this).find("td").each(function(){

});
});
});
//反选操作
$("#oppsite").click(function(){
$("input[name='tabletr']").trigger("click");
})
})

//点击单选操作-选择每行前的复选框时--------2015年5月25日11:44:09add
function changeState(obj){
var id=obj.id;
var objstr = id.replace("perrow","ModifyType");
if(document.getElementById(id).checked==true){
$("input[name='"+objstr+"']:first").trigger("click").attr("checked",'true');

}else{
$(obj).removeAttr("checked");
$("input[name="+objstr+"]:eq(0)").removeAttr("checked");
$("input[name="+objstr+"]:eq(1)").removeAttr("checked");
$("input[name="+objstr+"]:eq(2)").removeAttr("checked");
}
}
//点击单选按钮-----------2015年5月25日11:44:22add
function setCheckBox(objradio){
var radioname=objradio.name;
$("input[name='"+radioname+"']").not($(objradio)).removeAttr("checked");
$(objradio).attr("checked",true);
var checkboxname = radioname.replace("ModifyType","perrow");
$("#"+checkboxname).val(radioname.replace("ModifyType","showfirstValue"))
$("#"+checkboxname).attr("checked",'true');
}

</script>
</head>
<body>
表格操作：<button type="button" id="addrow">新增</button><button type="button" id="deleterow">删除</button><button type="button" id="oppsite">反选</button>
<table id="showtblSys" border="2px">
<tr><td><input type="checkbox" name="checkAllSys" id="checkAllSysid">业务名称</input></td><td>类型</td><td>说明</td></tr>
</table>
</body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航