モーダルに行を追加する方法は？

私のテーブルは以下の通りです。 iはTRのクリック時に、私は、モーダルビューが開いているが、それは、その行の任意の列のクリックで開いていることを発見していたときにクリックイベントハンドラはここモーダルに行を追加する方法は？

<!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>

を呼び出したときに知りたいです。また、他のすべての行データをそのmodal.iに追加するよりも、私がそのモーダルを閉じないようにしたい場合は、そのようにしたくありません。

出典

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

モーダルに行を追加する方法は？

答えて

関連する問題