如图!遍历得到的数组出现重复

1
img
2

img

3.点击 123数据后,右边div隐藏 ,值传递到左边div

img
4.再次点击浏览后,出现重复

img

?如何没有重复

<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循环赋值前先清空值