​​の中にチェックボックスを追加すると、[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を実装していないので、デフォルトの"[object Object]"文字列を取得します。

あなたはすでにそれをやり続ける、マークアップで作業している：

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

...またはその代わりにオブジェクトを操作するコードを切り替えます。