追加​​內的複選框返回[object，Object]

Question

我有一個小項目工作。當我將項目添加到我的數組時，它們將顯示在我的字段下方的表格中。

我的問題是，當我嘗試附加複選框時，它返回[object, Object]。

我的HTML：

<div class="container"> 
    <input id="list-input" /> 
    <select id="select-status"> 
     <option value="on-going">on-going</option> 
     <option value="completed">completed</option> 
    </select> 
    <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"> 
     <table id="mylist"> 
      <thead> 
       <th>ID Number</th> 
       <th>Description</th> 
       <th>Status</th> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 
    </div> 
    <button id="clear">clear</button> 
</div> 

我的javascript：

var tasks = []; 
var count = 0; 

$('document').ready(function(){ 

    $('#add').click(function() { 
     var desc = $.trim($('#list-input').val()); 
     var status = $('#select-status option:selected').val(); 
     var id  = Date.now(); 
     item  = {}; 

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

     item.id   = id; 
     item.description = desc; 
     item.status  = status; 
     tasks.push(item); 

     var tr = "<tr>"; 
     var td1 = "<td id="+ item.id +">" + item.id + "</td>"; 
     var td2 = "<td>" + item.description + "</td>"; 
     var td3 = "<td>" + item.status + "</td>"; 
     var td4 = "<td>" + $('<input/>',{'type':'checkbox'}) + "</td>" ; 

     $("#mylist tbody").append(tr + td1 + td2 + td3 + td4); 

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

    //clear list function 
    $('#clear').click(function(){ 
     tasks = []; 

     $('#mylist tbody').empty(); 

     setTimeout(function(){ 
      alert("List is now empty!"); 
     }, 500); 

    }); 

    //remove list function 

    $('#delete').on('click', function() { 
     $('#mylist input:checked').closest('#item').remove(); 
    }); 
}); 

Answer 1

這條線：

var td4 = "<td>" + $('<input/>',{'type':'checkbox'}) + "</td>" ; 

創建一個jQuery對象，然後用繩子串接它。大多數對象不實現toString（而jQuery對象不），所以你得到默認的"[object Object]"字符串。

你已經在標記工作，繼續這樣做：

var td4 = "<td><input type='checkbox'></td>" ; 

...或交換機上的代碼使用對象來代替。