Question

我只是点击了具有链接的演示api并创建了一个动态表，并且在每次单击参数时都会插入一个新行，我只想恢复表中的重复条目。

 $(document).ready(function () {
 	//count = 1;
    var counter=1,flag=0;

           $("#api").click(function () {
            	var index = ($("#para").val());
            	if (index == "") {
            		alert("Please input data");
            		return false;
            	}
            	else{
            		$.ajax({
                    url: 'https://jsonplaceholder.typicode.com/todos/'+index,
                    type: 'GET',
                    dataType: 'json',
                    crossDomain: true,
                    success: function (data, textStatus, xhr) {
                        console.log(data);
                       
	                    var tr = [];
                    
                        if(flag==0){
                    mytable = $('<table></table>').attr({ id: "basicTable", class:"basicTable1" });

                       //for (var i = 0; i < count; i++) {
                       let ab = $('<h1>API Data</h1>').appendTo("#h");
                       let row = $('<tr></tr>').appendTo(mytable);
                       let row1 = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
                       $.each(data, function(key, val) {
                      $('<th></th>').text(key).appendTo(row); 
                      $('<td></td>').text(val).appendTo(row1); 

                          });
                        let row2 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row1);
                    flag=1;
                      counter++;
                      //}
                  mytable.appendTo("#data");

                     }
                    else{
                   //for (var i = 0; i < count; i++) {
                   let row = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
                   $.each(data, function(key, val) {
                  $('<td></td>').text(val).appendTo(row); 
                  });
                  let row1 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row);
                  counter++;
                   //}
                       mytable.appendTo("#data");   
} 
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.log(errorThrown);
                        alert("No Record Found");
                    }
                });

            	}
                  
             });
       });
function removeFun(a){
$("#row"+a).remove();
}

 var textbox = $("#data");
  textbox.change(function() {
     $("#basicTable").find("td").each(function(){
        if($(this).html()==textbox.val()){
           alert(textbox.val());
        };
     })
  });

.h1{
	color: orange;
	margin:30px;
}
.h2{
	margin-top: 20px;
}
table, th, td {
   border: 2.5px solid black;
   align-content: center;
}
table{
	width: 80%;
	text-align: center;
}
th{
	height: 50px;
	align-content: right;
	background-color: orange;
}
th:hover {background-color: #3e8e41}
th,td{
	width: 30%;
}
.button1 {
  padding: 10px 15px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: orange;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button1:hover {background-color: #3e8e41}

.button1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

<!DOCTYPE html>
<html>
<head>
	<title>Api hit with JSON</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	
</head>
<body>
<center><u class="h1">AJAX</u> api with JSON</center>
<center>
	<div class="h2">
		<label>Enter the parameter</label>
		<input type="number" name="" id="para">
		<button id="api">Submit</button>
		</div>
	<div id="h"></div>
	<div id="data"></div>
</center>
</body>
</html>

这是我的文件，我点击了链接的演示api并将数据获取到动态表中，但是我想限制动态表中的重复文件。

     $(document).ready(function () {
    //count = 1;
    var counter=1,flag=0;

           $("#api").click(function () {
                var index = ($("#para").val());
                if (index == "") {
                    alert("Please input data");
                    return false;
                }
                else{
                    $.ajax({
                    url: 'https://jsonplaceholder.typicode.com/todos/'+index,
                    type: 'GET',
                    dataType: 'json',
                    crossDomain: true,
                    success: function (data, textStatus, xhr) {
                        console.log(data);

                        var tr = [];

                        if(flag==0){
                    mytable = $('<table></table>').attr({ id: "basicTable", class:"basicTable1" });

                       //for (var i = 0; i < count; i++) {
                       let ab = $('<h1>API Data</h1>').appendTo("#h");
                       let row = $('<tr></tr>').appendTo(mytable);
                       let row1 = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
                       $.each(data, function(key, val) {
                      $('<th></th>').text(key).appendTo(row); 
                      $('<td></td>').text(val).appendTo(row1); 

                          });
                        let row2 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row1);
                    flag=1;
                      counter++;
                      //}
                  mytable.appendTo("#data");

                     }
                    else{
                   //for (var i = 0; i < count; i++) {
                   let row = $('<tr id="row'+counter+'" ></tr>').appendTo(mytable);
                   $.each(data, function(key, val) {
                  $('<td></td>').text(val).appendTo(row); 
                  });
                  let row1 = $('<button class="button1" id="button'+ counter+'" onclick=removeFun('+ counter+')>remove Row</button>').appendTo(row);
                  counter++;
                   //}
                       mytable.appendTo("#data");   
} 
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.log(errorThrown);
                        alert("No Record Found");
                    }
                });

                }

             });
       });
function removeFun(a){
$("#row"+a).remove();
}

Answer 1

首先，您需要从“数据”中删除重复项

   var GroupByColumn = function (SourceData, columnName) {
    var Unique = {};
    var groupByColumn = columnName;
    var tempData = SourceData;
    for (var i = 0; i < tempData.length; i++) {
       if (!Unique[tempData[i][groupByColumn]])
        Unique[tempData[i][groupByColumn]] = [];
       Unique[tempData[i][groupByColumn]].push(tempData[i]);
   }
  return Unique;
}

使用上述功能，您可以找到唯一的数据

var z= [
          {
         "userId": 1,
         "id": 1,
         "title": "delectus aut autem",
         "completed": false
         },
         {
          "userId": 1,
          "id": 2,
          "title": "quis ut nam facilis et officia qui",
          "completed": false
        }
]
GroupByColumn(z,"id")
GroupByColumn(z,"title")
GroupByColumn(z,"completed")
GroupByColumn(z,"userId")

根据您的需要，它将返回您的数据。希望这会有所帮助

如何限制动态表中的重复数据

1 个答案: