1
2
3.点击 123数据后,右边div隐藏 ,值传递到左边div
4.再次点击浏览后,出现重复
?如何没有重复
<input id='liulanid'>
<div class="azll" id="azllan">
<table id="tablebl" style="border: 1px solid red" width="100px" height="100px" >
<tr>
<td>工单列表</td>
</tr>
</table>
</div>
</body>
<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
//遍历后赋值(就是上面传递至)
$("#tablebl").on("click", 'td',function () {
document.getElementById("azllan").style.display='none';
//点击选中的table td值
var value = $(this).text();
//得到之后就可以赋值了
$("#liulanid").val(value);
})
//遍历
function chaxungd() {
document.getElementById("azllan").style.display='block';
$.ajax({
url: "/zd/chaxungd",
method: "POST",
dataType: "json",
success: function (data){
//判断打印一下是否得到了返回值
//如果后台有多条数据,使用each循环接收
$.each(data, function (i,n){
$("#tablebl").append("<tr><td style='border: 1px solid red'>"+n.zdid+"</a></td></tr>")
});
}
});
}
1.出现重复是因为你每次点击按钮ajax请求后,只为dom做了新增,就没有清除之前的记录
2.清除可以在32行处新增一行清除之前记录的代码
清除table中除第一个之外的所有tr
$('#tablebl').not('tr:first').remove();
$("#tablebl")在each循环赋值前先清空值