动态增加tr 序号自动编号删除或增加时序号自动改变

来源：互联网发布：surelaptop拉杆箱知乎编辑：程序博客网时间：2024/05/09 14:26

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="img/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="content">
<div class="item">
<div class="serial">0<label>、</label></div>
<div style="width: 180px;float:left;"><input type="text" style="width:100%;" class="u-input1"></div>
<div style="float:left;width:100px;margin-left:20px;"><input type="checkbox" />正确答案</div>
<div class="m-btn-group f-clear">
<button type="button" class="u-btn xs info" onclick="add_line(this)"><i class="iconfont"></i>增加</button>
<button type="button" class="del u-btn xs danger"><i class="iconfont"></i>删除</button>
</div>
</div>
</div>
<style>
.content {
margin-top: 10px;
width: 80%;
margin: auto;
}
.item {
width: 100%;
height: 35px;
margin: 4px;
}
.serial {
width: 40px;
float: left;
}
.u-input1 {
height: 22px;
line-height: 22px;
padding: 3px 0;
border: #D7D7D7 1px solid;
font-size: 13px;
color: #333;
background: #fff;
border-radius: 3px;
text-indent: 5px;
font-family: "Microsoft YaHei", 微软雅黑, arial, 宋体;
}
</style>
<script>
var num = 1;
var test = $("#content");
function add_line(xh) {
var html = "<div class='item'><div class='serial'></div><div style='width: 180px;float:left;'><input type='text' style='width:100%;' class='u-input1'></div><div style='float:left;width:100px;margin-left:20px;'><input type='checkbox' />正确答案</div><div class='m-btn-group f-clear'><button type='button' class='u-btn xs info' onclick='add_line(this)'><i class='iconfont'></i>增加</button><button type='button' class='del u-btn xs danger'><i class='iconfont'></i>删除</button></div></div>";
$(xh).parent().parent().after(html);
var items = test.find(".item");
var serials = test.find(".serial")
serials.html("");
$.each(items, function(k, v) {
serials.eq(k).html(k);
});
num++;
}
$("#content .del").live("click", function() {
var dels = test.find(".del");
var delnum = dels.index($(this));
var items = test.find(".item");
items.eq(delnum).remove();
var serials = test.find(".serial");
serials.html("");
$.each(items, function(k, v) {
serials.eq(k).html(k);
});
});
</script>
</body>

</html>

效果：

阅读全文

0 0

动态增加tr 序号自动编号 删除或增加时序号自动改变

动态增加tr 序号自动编号删除或增加时序号自动改变