Question

我使用JS和jQuery编写代码。代码在我的表中添加了新行。每行包含删除按钮，但不起作用。我还要实现编辑按钮。

我的表：

<div class="row">
   <div class="col-md-12">
      <table class="table table-striped" id = "my-table">
       <thead>
        <tr>
            <th>Date</th>
            <th>Example</th>

        </tr>
          </thead>
          <tbody>



          </tbody>

        </table>

   </div>
   </div>
  </div>

JS代码：

$(document).ready(function(){
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd='0'+dd
} 

if(mm<10) {
mm='0'+mm
} 
today = mm+'/'+dd+'/'+yyyy;
//var counter = 1;


$('button#sending_button').click(function(){
    var text = $('textarea#mytextarea').val();
    $('#my-table').append('<tr><td>'+today+'</td><td>'+text+'</td><td><button type="button" id="delete-button"  class="btn btn-danger">Usuń</button></td></tr>');
    $('textarea#mytextarea').val('');
    //counter++;

});

$('#my-table').on('click', 'button.btn btn-danger', function() {
    $(this).parents('tr').remove();  

});

}）;

我不知道还应该解释这个问题。

Answer 1

你的问题在这里：

$('#my-table').on('click', 'button.btn btn-danger', function() {

应为button.btn.btn-danger。

一些随机的建议：

不要重复每个按钮的ID（＆＃34; delete-button＆＃34;）：id＆＃39; s应该是唯一的
使用具有语义意义的课程（delete button也会很好）
在定义委托事件监听器时使用所述类，而不是button.btn.btn-danger（它过于绑定到DOM及其样式定义）
使用parent代替parents以避免意外。他们有两种不同的方法，目标不同
事件更好，请使用closest。

删除表中的按钮，jQuery

1 个答案: