这是经过初面之后二面遇到的上机操作要实现的业务，
列表分块显示，如果某块数据只有一条则显示A，如果多条则显示A1～An，每条数据可以删除，当所有模块数据删除剩余最后一个单独模块的最后一条数据则不能继续删除，提示用户。
下边是实现需求的源码，借助了jquery，面试过程还是有些紧张的，可能不是最优写法，其实用vue框架来实现，超级方便，原生来写，太多时间浪费在了字符串拼接上，欲哭无泪！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<style>
body{
color: #333;
}
.tie::before,.tie::after{
content: '';
margin-left: 10px;
display: block;
border-left: 1px solid #f1f1f1;
height: 20px;
}
.number{
display:inline-block;
background:rgba(224,50,54,0.08);
font-size: 14px;
width: 24px;
height: 24px;
border-radius: 50%;
line-height: 24px;
text-align: center;
color: #333;
}
.box{
border: 1px solid #f1f1f1;
overflow: hidden;
margin-bottom: 10px;
padding-left: 30px;
}
</style>
</head>
<body>
<div class="box">
<div class="line">
<span class="number">A</span>
<select name="" id="">
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
</select>
<select name="" id="">
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
</select>
<input type="text" value=">=">
<input type="text" value="1">
<input type="date">
<button class="delete">删除</button>
</div>
<button @click="addOr">OR</button> <button @click="addAnd">AND</button>
</div>
<div class="box">
<div class="line">
<span class="number">A</span>
<select name="" id="">
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
</select>
<select name="" id="">
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
</select>
<input type="text" value=">=">
<input type="text" value="1">
<input type="date">
<button class="delete">删除</button>
</div>
<button onClick="addOr()">OR</button> <button onClick="addAnd()">AND</button>
</div>
</body>
<script src="./jquery.min.js"></script>
<script>
var letter = ['A','B','C',"D",'E','F','G'];
var data = [
[
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false},
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': true},
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false}
],
[
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': true},
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false},
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false}
],
[
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false},
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': true},
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false}
],
[
{"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false}
]
]
$(function(){
init();
function init(){
//let boxLength = $('.box').length;
bodyContent = '';
for(let i =0; i < data.length; i++ ){
let boxContent = ''
data[i].length > 0 ? boxContent = '<div class="box">' :boxContent = '';
let number = '';
let tie = "ADD"
for(let r =0; r < data[i].length;r++){
data[i].length > 1 ?number = r+1 : number ='';
data[i][r]['tie'] ? tie = '<div class="tie">ADD</div>' : tie = '<div class="tie">OR</div>'
if(data[i].length < 2 || r == 0){
tie =''
}
boxContent += tie +`
<div class="line">
<span class="number">`+letter[i]+number+`</span>
<select name="" id="">
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
</select>
<select name="" id="">
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
<option value="1">123</option>
</select>
<input type="text" value=">=">
<input type="text" value="1">
<input type="date">
<button class="delete" data-i= `+i+` data-r=`+r+`>删除</button>
</div>
`
}
data[i].length > 0 && (boxContent += '<button class="addbutton" data-i = '+i+' data-type=true >OR</button> <button class="addbutton" data-i = '+i+' data-type=false>AND</button>')
bodyContent +=boxContent ;
bodyContent += '</div>'
}
$('body').html(bodyContent)
$('.line .delete').click(function(){
let i = $(this)[0].dataset.i;
let r = $(this)[0].dataset.r
console.log($(this)[0].dataset.i);
console.log($(this)[0].dataset.r);
console.log('删除');
console.log(data.length)
console.log(data)
if( data.length == 1 &&data[0].length == 1){
alert('不能再删除了');
return false;
}else{
if(data[i].length == 1){
data.splice(i,1);
}else{
data[i].splice(r,1)
}
init();
}
})
$(' .addbutton').click(function(){
let i =$(this)[0].dataset.i
console.log($(this)[0].dataset.i);
console.log($(this)[0].dataset.type);
console.log('添加')
if($(this)[0].dataset.type == 'false'){
data[i].push({"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': true})
}else{
data[i].push({"type": '用户做过','type2':'点击二手房子','type3':'>=','type4': 1,'time': '2019/05/25','tie': false})
}
init();
})
}
});
</script>
</html>
