如何在模態中追加一行？

我的表格如下。我想找出只要點擊事件處理上如何在模態中追加一行？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" 
     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script 
     src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     var t = $('#example').DataTable(); 
     var counter = 1; 
     t.row.add([ 
      "<input type='checkbox'>", 
      "<a href='#'>"+ counter+'.1' +"</a>", 
      counter +'.3', 
      counter +'.4', 
      counter +'.5', 
      counter +'.6' 
     ]).draw(true); 

    counter++; 

    t.row.add([ 
       "<input type='checkbox'>", 
       "<a href='#'>"+ counter+'.1' +"</a>", 
       counter +'.3', 
       counter +'.4', 
       counter +'.5', 
       counter +'.6' 
      ]).draw(false); 
     counter++; 

     $("tr").click(function(context) { 
      var value = context.currentTarget.innerHTML; 
      $(".modal-body").after(value); 
      $("#11").prop("hidden",false); 
     }); 

     $(".btn").click(function() { 
      $(".modal-body").empty(); 
      $("#11").prop("hidden",true); 
     }); 

    }); 


</script> 
</head> 
<body> 

    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Sr No.</th> 
       <th name="aa">Modal View</th> 
       <th>Label1</th> 
       <th>Label2</th> 
       <th>Label3</th> 
       <th>Label4</th> 
      </tr> 
     </thead> 
    </table> 

    <div id="11" hidden="true" class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 

     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 


</body> 
</html>

這裏呼籲當TR的點擊我發現該模式的看法正在打開，但它是開放在該行的任何列的點擊。另外，如果我不會關閉那個模式，那麼它會將所有其他行數據追加到那個模式中。我也不想這樣做。

來源

2017-02-22 Jitendra Yadav

所以你要複製的行單擊以模態的身體嗎？ –

是的，我想要相同的@ShiranDror –

是'.modal-body'一個'table'元素？ –

下面給出的可能是你想要的最接近的答案，也是現代的做法。您可以參考this link以獲取動態創建模態方式的更多詳細信息。

$(document).ready(function() { 
 
    var t = $('#example').DataTable(); 
 

 
    for (i = 1; i <= 10; i++) { 
 
    t.row.add([ 
 
     '<input type="checkbox">', 
 
     '<a href="javascript:void(0)" onclick="showModal(' + i + ')">' + i + '.1' + '</a>', 
 
     i + '.3', 
 
     i + '.4', 
 
     i + '.5', 
 
     i + '.6' 
 
    ]).draw(true); 
 
    } 
 
}); 
 

 
function showModal(rowid) { 
 

 
    BootstrapDialog.show({ 
 
    title: 'Title goes here.', 
 
    message: function() { 
 
     var msg = ''; 
 
     msg += '<table>'; 
 
     msg += '  <thead>'; 
 
     msg += '   <tr>' + $('#example thead tr').html() + '</tr>'; 
 
     msg += '  </thead>'; 
 
     msg += '  <tbody>'; 
 
     msg += '   <tr>' + $('#example tbody tr:nth-child(' + rowid + ')').html() + '</tr>'; 
 
     msg += '  </tbody>'; 
 
     msg += '</table>'; 
 
     return msg; 
 
    }, 
 
    buttons: [{ 
 
     label: 'Close', 
 
     action: function(dialog) { 
 
     dialog.close(); 
 
     } 
 
    }] 
 
    }); 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 

 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
    <thead> 
 
    <tr> 
 
     <th>Sr No.</th> 
 
     <th name="aa">Modal View</th> 
 
     <th>Label1</th> 
 
     <th>Label2</th> 
 
     <th>Label3</th> 
 
     <th>Label4</th> 
 
    </tr> 
 
    </thead> 
 
</table>

來源

2017-02-22 22:01:51

如何在模態中追加一行？

回答

相關問題