顯示數組對象到html表

Question

我目前正在開始一個小項目

我有這個將項目推送到數組的輸入。我的問題是每次使用按鈕按下對象時，它都會在我的表格中顯示一些重複的對象。

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(''); 
 
});

<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 1

更新，你可以儘量避免使用數組，可以用一些適當的選擇

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(''); 
 

 
});

<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

達到理想的答案。如果你把循環只要獲得陣列中的最後一個，它將解決您的問題米

編輯：這樣一來，如果你想使用的任務在一些其他的功能，它不明確它

編輯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 3

你有表的初始化重複一次加法是由時間。

試試這個：

var tasks = []; 
 
var count = 0; 
 

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

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

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

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

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

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

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