0

私はこれに従って、To Do リストの付箋を作成しています 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

jsに複数行の文字列を追加しようとすると、次のようになります

"foo \
bar"

また

  "foo"+
    "bar"
于 2013-04-25T15:41:25.477 に答える
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 に答える