配列オブジェクトをhtmlテーブルに表示

Question

私は現在少しプロジェクトを開始しています

私は項目を配列にプッシュします。私の問題は、私がテーブル内にいくつかの重複したオブジェクトを表示するボタンを使用してオブジェクトを押すたびにです。あなたは、配列の使用を避けることができますし、ループを取る場合は、いくつかの適切なセレクタ

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 1

あなたがプッシュしている配列の最後のものを取得すれば、それはあなたのprobleを解決しますメートル

EDIT：あなたは、いくつかの他の機能でタスクを使用したい場合は、この方法では、それはありませんからそれをクリアしない

EDIT 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

を使用することによって、所望の達成可能な答えを更新しました

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