防止jquery在表中追加重复值答案

【问题标题】：prevent jquery to append duplicate values in a table防止jquery在表中追加重复值
【发布时间】：2017-11-28 09:37:32
【问题描述】：

我在使用 jQuery 和 PHP 从 AJAX 调用 JSON 响应时得到重复值。代码运行完美，但在选择下拉列表时给出了重复的条目。有两个下拉列表，第一个从 db 调用，基于第一个，值在第二个中传播。在选择第二个时，它将调用一个 java 脚本，该脚本使用 jQuery 从 AJAX 返回 JSON 响应，但值重复。

$(document).ready(function(){
	$("#employee").change(function() {    
		//var id = $(this).find(":selected").val();
		//var dataString = 'empid='+ id; 
		var b_code = $(this).find(":selected").val();
		var dataString = 'empid='+ b_code;
    $.ajax({
        url: 'getData.php',
        type: 'get',
        dataType: 'JSON',
		data: dataString,
        success: function(response){
            var len = response.length;
            for(var i=0; i<len; i++){
                var id = response[i].id;
                var X1 = response[i].X1;
                var X2 = response[i].X2;
                var X3 = response[i].X3;
				        var X4 = response[i].X4;
				        var X5 = response[i].X5;
				
                var tr_str = "<tr>" +
                    "<td align='center'>" + (i+1) + "</td>" +
                    "<td align='center'>" + X1 + "</td>" +
                    "<td align='center'>" + X2 + "</td>" +
                    "<td align='center'>" + X3+ "</td>" +
				          	"<td align='center'>" + X4 + "</td>" +
					          "<td align='center'>" + X5+ "</td>" +
                    "</tr>";
					
                $("#userTable").append(tr_str);
            }
			} 
		})
    });
});

<!DOCTYPE html>
<html>

<head>
  <title>TSP</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="csss/bootstrap.min.css">
 <link rel="stylesheet" href="csss/style1.css">
  <!--</style> -->
<script type="text/javascript">
           $(document).ready(function(){          	  
           	   $("#district").change(function(){
                     var district=$("#district").val();
           	   	     $.ajax({
           	   	     	type:"post",
           	   	     	url:"getblock.php",
           	   	     	data:"district="+district,
           	   	     	success:function(data){
                              $("#employee").html(data);
           	   	     	}
           	   	     });
           	   });
           });
      </script>
</head>

<body>
  <div class="container" style="margin-top: 50px;"> 
    <div class="col-sm-6 col-sm-offset-3"> 
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title"><center>Select District & Block</center></h3>
        </div>
        <div class="panel-body">
		District :
        <select name="district" id="district">
          <option>-select your district-</option>
  	    <?php 
  	    include "db_connect.php"; 
        //$result=mysqli_query("SELECT DTCode,DTName from district order by DTName");
		$sql = "SELECT DTCode,DTName from district order by DTName";
		$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
        while($district = mysqli_fetch_assoc($resultset)){
        echo "<option value=$district[DTCode]>$district[DTName]</option>";
  	    } ?>
  	    </select>
 
  	    Block :
  	    <select name="block" id="employee">
  	    	<option>-select your block-</option>
		</select>
        </div>
      </div>
   </div>
  </div> 
  
	
<div class="container">
   <table id="userTable" border="2" >
      <tr>
       <th width="5%">S.no</th>
       <th width="10%">X1</th>
       <th width="10%">X2</th>
       <th width="10%">X3</th>
	   <th width="10%">X4</th>
	   <th width="6%">X5</th>
      </tr>
   </table>
</div>

</body>

</html>
<script type="text/javascript" src="script/getDatan.js"></script>

【问题讨论】：

您可以将每个条目 id 或条目本身添加到列表中，然后在每次迭代时检查当前条目是否在该字典/列表中，如果是则跳过它。跨度>
你能分享任何参考如何做到这一点。
检查我的答案

标签： javascript php jquery json ajax

【解决方案1】：

正如我在评论中提到的，您可以使用一个数组来存储您传递的 id，并且在每次迭代时，您可以检查是否有重复的。

这是一个例子：

var testArray = [];

var len = response.length;
    for(var i=0; i<len; i++){
        if($.inArray(response[i].id, testArray)){ // check whether you have went over it already
            continue;
        }
        testArray.push(response[i].id); // add the current id to the list and thats how you will avoid duplicates, assuming that the IDs are duplicate
        var id = response[i].id;
        var X1 = response[i].X1;
        var X2 = response[i].X2;
        var X3 = response[i].X3;
        var X4 = response[i].X4;
        var X5 = response[i].X5;

        var tr_str = "<tr>" +
                "<td align='center'>" + (i+1) + "</td>" +
                "<td align='center'>" + X1 + "</td>" +
                "<td align='center'>" + X2 + "</td>" +
                "<td align='center'>" + X3+ "</td>" +
                        "<td align='center'>" + X4 + "</td>" +
                          "<td align='center'>" + X5+ "</td>" +
                "</tr>";

        $("#userTable").append(tr_str);

希望这会有所帮助！

【讨论】：