オープンモーダルボタンをモーダルにパラメータとして送信するにはどうすればいいですか？

Question

私はデータテーブルを使って作業していて、テーブルから行を削除するために削除ボタンを追加しました。ここではいくつかのHTML

私のモーダルは次のとおりです。

 <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Confirm Remove</h4> 
       </div> 
       <div class="modal-body"> 
        <label for="version" class="control-label">Removing a row from the table cannot be undone. Are you sure you want to continue</label> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <button type="button" class="btn btn-danger btn-ok" >Remove</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal End --> 

マイ削除]ボタン

<td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td> 

私はモーダルを開くことができますが、私は[削除]をクリックしたときに、何も起こりません。ここに私の.jsファイルのコードがあります

function removeRow(btn) { 
    var table = $('#Table').DataTable({"retrieve": true}); 
    var row = $(btn).closest('tr'); 
    if(row) { 
     table.row(row).remove().draw(); 
    } 

} 


$('#myModal').on('show.bs.modal', function(e) { 
    var button = e.relatedTarget; 
    $('.btn-ok', this).data('button', button); 
}); 



$('#myModal').on('click', '.btn-ok', function(e) { 
    var button = $(this).data('button'); 
    removeRow(button); 
}); 

私は間違っていますか？

Answer 1

あなたのjqueryイベントコードの中に.が見つかりませんでした。

ので、代わりのbtn-okこの.btn-ok

はまた、私はあなたがデータ属性の内側にボタンオブジェクトを置くことができないでください。いくつかの一意の識別子を付ける必要があります。

だから、このようなものではなく Ifの

$('#myModal').on('show.bs.modal', function(e) { 
    var button = e.relatedTarget.attr("id"); 
    $('.btn-ok').attr('data-target', id); 
}); 

$('#myModal').on('click', '.btn-ok', function(e) { 
    var button = $(this).attr('data-target'); 
    removeRow(target); 
}); 


function removeRow(target) { 
    var table = $('#Table').DataTable({"retrieve": true}); 
    var row = $("#"+target).closest('tr'); 
if(row) { 
    table.row(row).remove().draw(); 
} 
} 

Answer 2

使用Try and Catch文を仕事ができます。 。あなたが使用

：

table.row（行）.removeを（）（）を描きます。

の代わりに：

row.remove(); 
table.draw(); 

はそれが役に立てば幸い！

$(document).ready(function() { 
 
    
 
    $('#Table').DataTable(); 
 
}); 
 

 

 
function removeRow(btn) { 
 
    var table = $('#Table').DataTable({ 
 
    "retrieve": true 
 
    }); 
 
    var row = $(btn).closest('tr'); 
 
    
 
    try { 
 
    row.remove(); 
 
    table.draw(); 
 
    } 
 
    catch(e) { 
 
    console.log('Error Message: ' + e); 
 
    } 
 

 

 
} 
 

 

 
$('#myModal').on('show.bs.modal', function(e) { 
 
    var button = e.relatedTarget; 
 
    $('.btn-ok', this).data('button', button); 
 
}); 
 

 

 

 
$('#myModal').on('click', '.btn-ok', function(e) { 
 
    var button = $(this).data('button'); 
 
    removeRow(button); 
 
    $('#myModal').modal('hide'); 
 
});

table { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" > 
 

 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js" ></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 

 
<table id="Table"> 
 
    <tr> 
 
     <td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td> 
 
     <td>First Row</td> 
 
    </tr> 
 
    <tr> 
 
     <td><button type="button" class='btn btn-danger' data-toggle="modal" data-target='#myModal' >Remove</button></td> 
 
     <td>Second Row</td> 
 
    </tr> 
 
</table> 
 

 

 

 

 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
        <h4 class="modal-title" id="myModalLabel">Confirm Remove</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <label for="version" class="control-label">Removing a row from the table cannot be undone. Are you sure you want to continue</label> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
        <button type="button" class="btn btn-danger btn-ok" >Remove</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>