增删行（使用jQuery实现，最基本样式，主要为js及校验）

来源：互联网发布：淘宝信用卡积分浦发编辑：程序博客网时间：2024/05/21 17:19
<!DOCTYPE HTML><html><head><title>添加活动</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="./jquery-1.12.3.min.js"></script><style type="text/css">.table td{padding-left: 0px!important;}.table a img{height: 20px;}.table td>div{border-right:1px dashed #000;} </style></head><body ><section class="rt_wrap content mCustomScrollbar"><div class="rt_content"><div id="withoutOutUrlDiv"><h3 class="tred">预约框信息</h3><div class="background-gray"><table class="table" id="order-table"><col style="width: 35%"><col style="width: 10%"><col style="width: 35%"><col style="width: 10%"><thead><tr><th style="text-align: left;">预约标题</th><th style="text-align: left;">类型</th><th style="text-align: left;">预约选项</th><th style="text-align: left;">操作</th></tr></thead><tbody><tr><td><input name="title" type="text" style="width: 80%;" /></td><td><select onchange="changeType(this)"><option value="1">文本框</option><option value="2">下拉框</option><option value="3">复选框</option></select></td><td><div>--</div></td><td><a href="javascript:;" onclick="addBigLine(this)">新增一行</a></td></tr></tbody></table></div></div><div style="height: 160px;"><a href="javascript:;" onclick="submit();">保存活动信息</a></div></div></section><script>function checkAllLine() {//获取所有增删行var $allTr = $("#order-table tbody tr"),result = true;//遍历所有增删行$.each($allTr, function(i, n) {var $tr = $(n),$firstTd = $tr.find("td:first"),$secondTd = $tr.find("td:eq(1)"),$thirdTd = $tr.find("td:eq(2)");//如果第一列为空，则外层循环直接结束if ($firstTd.find('input').val() == '') {alert("请输入预约标题");$firstTd.find('input').focus();result = false;return false;} else if ($secondTd.find('select').val() != '1') {//判断下拉框或复选框是否填写//遍历所有下拉框或复选框$.each($thirdTd.find('input'), function(p, q) {var $subInput = $(q);//如果有未填写的选项值，里外层循环都结束if ($subInput.val() == '') {alert("请输入预约选项");$subInput.focus();result = false;return false;}});}if (!result) {return false;}});return result;}function removeBigLine(obj) {var $this = $(obj);$this.closest('tr').remove();}function addBigLine(obj) {if (checkAllLine()) {var $this = $(obj),$bigTr = $this.closest('tr'),bigLine = '<tr>' +'<td><input name="title" type="text" style="width: 80%;" /></td>' +'<td>' +'<select onchange="changeType(this)">' +'<option value="1">文本框</option>' +'<option value="2">下拉框</option>' +'<option value="3">复选框</option>' +'</select>' +'</td>' +'<td><div>--</div></td>' +'<td>' +'<a href="javascript:;" onclick="addBigLine(this)">新增一行</a> ' +'<a href="javascript:;" onclick="removeBigLine(this)">删除该行</a>' +'</td>' +'</tr>';$bigTr.after(bigLine);}}function removeLine(obj) {var $this = $(obj);$this.closest('div').remove();}function addLine(obj) {if (checkAllLine()) {var $this = $(obj),$thisDiv = $this.closest('div'),smallLine = '<div>' +'<input name="title" type="text" style="width: 60%;" />' +'<a href="javascript:;" onclick="addLine(this)">新增一行</a> ' +'<a href="javascript:;" onclick="removeLine(this)">删除该行</a>' +'</div>';$thisDiv.after(smallLine);}}function changeType(obj) {var $this = $(obj),$changeTd = $this.parent().next(),type = $this.val(),typeValue = '<div>' +'<div>' +'<input name="title" type="text" style="width: 60%;" />' +'<a href="javascript:;" onclick="addLine(this)">新增一行</a>' +'</div>' +'</div>';if (type == '1') {$changeTd.html('<div>--</div>');} else if (type == '2') {$changeTd.html(typeValue);} else if (type == '3') {$changeTd.html(typeValue);} else {alert("系统错误");}}function submit() {if (checkAllLine()) {alert("我提交了");}}</script></body></html>
阅读全文
0 0