将数组对象显示为html表

Question

我目前正在开展一个小项目

我有这个输入将项目推送到数组。我的问题是每次我使用按钮推送对象时它会在我的表格中显示一些重复的对象。

＆＃13;

＆＃13;

DECLARE @orv INT = 0;

SELECT @orv=@orv|MyField
FROM MyTable
WHERE SomeColumnValue=123;

＆＃13;

var tasks = [];
var count = 0;

$('#add').click(function() {
  var desc = $.trim($('#list-input').val());
  var id = Date.now();
  item = {};
  item["id"] = id;
  item["description"] = desc;
  tasks.push(item);

  if (!desc) {
    item["id"] = "";
    alert("Input a description");
  }

  var tbl = $("<table/>").attr("id", "mytable");
  $("#mylist").append(tbl);
  for (var i = 0; i < tasks.length; i++) {
    var tr = "<tr>";
    var td1 = "<td>" + tasks[i]["id"] + "</td>";
    var td2 = "<td>" + tasks[i]["description"] + "</td>";

    $("#mytable").append(tr + td1 + td2);
  };

  //clear input field
  $('#list-input').val('');
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您取出循环并且只是获取您要推送的阵列中的最后一个，它将解决您的问题

编辑：这样，如果你想在其他一些功能中使用任务，它就不会清除它

编辑2：如果没有找到那种类型的ID，它只会附加在桌子上，让它变得更干净我认为

var tasks = [];
var count = 0;

$('#add').click(function() {
  var desc = $.trim($('#list-input').val());
  var id = Date.now();
  item = {};
  item["id"] = id;
  item["description"] = desc;
  tasks.push(item);

  if (!desc) {
    item["id"] = "";
    alert("Input a description");
  }


  if(!$("#mytable").length){ //Checks if mytable id exists
      var tbl = $("<table/>").attr("id", "mytable");
      $("#mylist").append(tbl);
    }

    var tr = "<tr>";
    var td1 = "<td>" + tasks[tasks.length-1]["id"] + "</td>";
    var td2 = "<td>" + tasks[tasks.length-1]["description"] + "</td>";

    $("#mytable").append(tr + td1 + td2);

  //clear input field
  $('#list-input').val('');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="list-input" />
  <button id="add">Add To List</button>
  <button id="delete">Remove From List</button>
</div>
<div class="container">
  <h1>Your List</h1>
  <div id="mylist">

  </div>
  <button id="clear">clear</button>
</div>

Answer 2

更新了您可以避免使用数组的答案，并且可以通过使用一些合适的选择器来实现所需的

＆＃13;

＆＃13;

var count = 0;
var tbl = $("<table/>").attr("id", "mytable");
$("#mylist").append(tbl);
 


$('#add').click(function() {

  var desc = $.trim($('#list-input').val());
  var id = Date.now();

  if (!desc) {
    alert("Input a description");
    return false;
  }

  
   var tr = "<tr>";
   var td1 = "<td>" + id + "</td>";
   var td2 = "<td>" + desc + "</td>";

   $("#mytable").append(tr + td1 + td2);

  //clear input field
  $('#list-input').val('');
});

$('#delete').click(function() {
  
  var desc = $.trim($('#list-input').val());
  
  if (!desc) {
    alert("Input a description");
    return false;
  }
  
  var td = $("td").filter(function() { 
    return $(this).text() == desc;
  });
  
  var row = td.parent();
  
  row.remove();
  
  
  $('#list-input').val('');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input id="list-input" />
  <button id="add">Add To List</button>
  <button id="delete">Remove From List</button>
</div>
<div class="container">
  <h1>Your List</h1>
  <div id="mylist">

  </div>
  <button id="clear">clear</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

每次添加时都会重复执行表的初始化。

请改为尝试：

＆＃13;

＆＃13;

var tasks = [];
var count = 0;

$(function(){
    var tbl=$("<table/>").attr("id","mytable");
	$("#mylist").append(tbl);
	for(var i=0;i<tasks.length;i++)
	{
	    var tr="<tr>";
	    var td1="<td>"+tasks[i]["id"]+"</td>";
	    var td2="<td>"+tasks[i]["description"]+"</td>";
	    
	   $("#mytable").append(tr+td1+td2);
	};
});

$('#add').click(function(){
	var desc = $.trim($('#list-input').val());
	var id = Date.now();
	item = {};
	item ["id"] = id;
	item ["description"] = desc;
	tasks.push(item);

	if (!desc){
		item ["id"] = "";
		alert("Input a description");
	}

	var tr="<tr>";
	var td1="<td>"+item["id"]+"</td>";
	var td2="<td>"+item["description"]+"</td>";
	    
    $("#mytable").append(tr+td1+td2);     

	//clear input field
	$('#list-input').val('');
});

＆＃13;

<div class="container">
		<input id="list-input" />
		<button id="add">Add To List</button>
		<button id="delete">Remove From List</button>
	</div>
	<div class="container">
		<h1>Your List</h1>
		<div id="mylist">

		</div>
		<button id="clear">clear</button>
	</div>

＆＃13;

＆＃13;

＆＃13;