ToDo列表应用程序-表: jQuery追加()/后()、/.parent()、.parent().remove()不工作性质或未识别

Question

我正在跟踪这个，做一个要做的清单粘贴http://www.paulund.co.uk/create-sticky-notes-to-do-list-in-css-and-jquery

我需要帮助。我的jquery代码不工作/不能被浏览器识别。我要做的是在用户单击“Add”按钮时插入一个新行。

我贴在jsFiddle上：** http://jsfiddle.net/RJjRt/ **

我的jQuery代码：

$(document).ready(function(){
  // Add button click event
  $("#addNew").click(function(){
    addNewRow();
  });
});

// Add a new row when Add Task button is clicked
function addNewRow(){
 var numRows = $('#taskTable tr').length;
 $('#taskTable').append('
  <tr>
   <td><input type="text" id="title-'+numRows+'" placeholder="Your Task Name"/></td>
   <td><input type="text" id="description-'+numRows+'" placeholder="Task Description"/></td>
   <td><input type="button" class="deleteButton" id="delete-'+numRows+'" title="Delete Task" value="Delete" /></td>
  </tr>
 ');
}

我也试过

$('#taskTable tr:last').after(...

但也没用。

我的HTML代码：

<div class="around-table">
<table id="taskTable">
  <tr>
    <th>Task</th>
    <th>Description</th>
    <th></th>
  </tr>
  <tr>
    <td><input type="text" id="title-1" placeholder="Your Task Name"/></td>
    <td><input type="text" id="description-1" placeholder="Task Description"/></td>
    <td><input type="button" class="deleteButton" id="delete-1" title="Delete Task" value="Delete" /></td>
  </tr>
  <tr>
    <td><input type="text" id="title-2" placeholder="Your Task Name"/></td>
    <td><input type="text" id="description-2" placeholder="Task Description"/></td>
    <td><input type="button" class="deleteButton" id="delete-2" title="Delete Task" value="Delete" /></td>
  </tr>
</table>

<input type="button" id="addNew" value="Add Task" />

</div>

谢谢你的帮助。

-修复后

// Function that runs on page load
$(document).ready(function(){
  // Add button click event
  $("#addNew").click(function(){
    addNewRow();
  });
  // Delete button click event
  $('.deleteButton').click(function(){
    deleteRow($(this));
  });
});


// Add a new row when Add Task button is clicked
function addNewRow(){
  var numRows = $('#taskTable tr').length;
  $('#taskTable tr:last').after('\
    <tr>\
      <td><input type="text" id="title-'+numRows+'" placeholder="Your Task Name"/></td>\
      <td><input type="text" id="description-'+numRows+'" placeholder="Task Description"/></td>\
      <td><input type="button" class="deleteButton" id="delete-'+numRows+'" title="Delete Task" value="Delete" /></td>\
   </tr>\
  ');
}

// Delete the grandparent of the delete button
// which is the entire row of the table (tr > td > a)
function deleteRow(button){
 button.parent().parent().remove();
}

Answer 1

如果没有一些小技巧，就不能在JavaScript中使用多行字符串，因此代码将在行中失败。

$('#taskTable').append('

什么都不会执行。但是，如果用反斜杠转义换行符，则可以具有多行字符串：

$('#taskTable').append(' \

只需确保反斜杠确实是行中的最后一个字符。

不过，在本例中，您可以使用jQuery构建html：

$('#taskTable').append(
    $('<tr>').append($('<input>')
        .attr('type','text')
        .attr('id','title-'+numRows)
        .attr('placeholder','Your Task Name')
    ).append($('<input>')
        .attr('type','text')
        .attr('id','description-'+numRows)
        .attr('placeholder','Task Description')
    ).append($('<input>')
        .attr('type','button')
        .attr('id', 'delete-'+numRows)
        .attr('title', 'Delete Task')
        .val('Delete')
        .addClass('deleteButton)
    ))
);

Answer 2

您尝试在js中追加多行字符串，如下所示

"foo \
bar"

或

  "foo"+
    "bar"

Answer 3

您的代码抛出一个SyntaxError：unterminated string literal，您应该转义换行符。

function addNewRow() {
    var numRows = $('#taskTable tr').length;
    $('#taskTable').append('<tr>\
           <td><input type="text" id="title-' + numRows + '" placeholder="Your Task Name"/></td>\
           <td><input type="text" id="description-' + numRows + '" placeholder="Task Description"/></td>\
           <td><input type="button" class="deleteButton" id="delete-' + numRows + '" title="Delete Task" value="Delete" /></td>\
           </tr>\
   ');
}