<!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=" 35%">
<col style=" 10%">
<col style=" 35%">
<col style=" 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=" 80%;" /></td>
<td>
<select οnchange="changeType(this)">
<option value="1">文本框</option>
<option value="2">下拉框</option>
<option value="3">复选框</option>
</select>
</td>
<td><div>--</div></td>
<td>
<a href="javascript:;" οnclick="addBigLine(this)">新增一行</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="height: 160px;">
<a href="javascript:;" οnclick="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=" 80%;" /></td>' +
'<td>' +
'<select οnchange="changeType(this)">' +
'<option value="1">文本框</option>' +
'<option value="2">下拉框</option>' +
'<option value="3">复选框</option>' +
'</select>' +
'</td>' +
'<td><div>--</div></td>' +
'<td>' +
'<a href="javascript:;" οnclick="addBigLine(this)">新增一行</a> ' +
'<a href="javascript:;" οnclick="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=" 60%;" />' +
'<a href="javascript:;" οnclick="addLine(this)">新增一行</a> ' +
'<a href="javascript:;" οnclick="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=" 60%;" />' +
'<a href="javascript:;" οnclick="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>