Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

要解决此问题，您需要先添加td，然后将按钮添加到td，例如：

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

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

1 个答案: