0

我正在关注这个，制作一个待办事项列表便笺http://www.paulund.co.uk/create-sticky-notes-to-do-list-in-css-and-jquery

我需要帮助。我的 jquery 代码不起作用/浏览器无法识别。我要做的是在用户单击“添加新”按钮时插入新行。

我粘贴在 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();
}
4

3 回答 3

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

于 2013-04-25T15:45:15.527 回答
1

您尝试在 js 中附加多行字符串，就像这样

"foo \
bar"

或者

  "foo"+
    "bar"
于 2013-04-25T15:41:25.477 回答
1

您的代码抛出 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>\
   ');
}
于 2013-04-25T15:43:40.243 回答