按钮在动态表中显示为[ Object ]

Question

我试图使用jquery创建一个待办事项列表，并希望向我的表中添加一个delete按钮。当delete按钮显示在表中时，它只表示Object。有人能帮忙吗？下面是我的jQuery和HTML。我的jQuery的最后一行是添加删除按钮的地方。

​

$(document).ready(function() {
  //Add the importance level to the first column of the to do table
  $("#submit-button").on("click", function addTask() {
    var taskToDo = $("#comment").val();
    var newRow = $("<tr>");
    var newTd = $("<td>");
    var deleteBtn = $("<button>").addClass("btn btn-danger").append("X");

    //Append the importance ranking to the table
    if($('#vimp').is(':checked'))
      alert("Your task is very important")
      newRow.append("<td>X</td>");
      /*var bullet = $("&bull;").css("color","red");
      $("#to-do-list").append(newRow);
        newRow.append('<td>'+bullet+'</td>');*/

    if($('#simp').is(':checked'))
      alert("Your task is somewhat important")

    if($('#canwait').is(':checked'))
      alert("Your task can wait")
  
    //Append the task to the table
    $("#to-do-list").append(newRow);
      //newRow.append("<td>X</td>");
      newRow.append('<td>'+taskToDo+'</td>');
      newRow.append('<td>'+deleteBtn+'</td>');

  });

});

      <table class="table table-striped table-responsive table-hover" id="col-width">
        <col width="30px">
        <col width="400px">
        <thead>
          <tr>
            <td>Importance</td>
            <td>Task</td>
            <td>Delete button</td>
          </tr>
        </thead>
        <tbody id="to-do-list">
        </tbody>
      </table>

​

Answer 1

deleteBtn是一个jQuery对象，但是'<td>'+deleteBtn+'</td>'中的+操作符需要一个字符串，因此该对象自动转换为它的字符串表示形式。

要解决这个问题，您需要首先附加td，然后将按钮附加到td中，例如：

newRow.append('<td>').find('td').last().append(deleteBtn);