Question

我的表格如下。我想知道每次点击事件处理程序调用

    <!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我发现模态视图正在打开但是在点击该行的任何列时打开。此外，如果我不关闭该模态，它将所有其他行数据附加到该模态。我也不想这样做。

Answer 1

以下可能是您想要的最接近的答案，也是现代的做法。您可以参考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>

如何在模态中追加一行？

1 个答案: