onclick后如何在模式中显示行内容

Question

我有一个数据表，我想用它在模式上连续显示所有内容。

当我单击所选行的（批准和拒绝）按钮时，此后，在“拒绝”和“批准”之后，整个行都将被删除。我已经在外部将其包含在HTML和JavaScript代码中。

这是我的代码：

$(document).ready(function() {
  $('#dtBasicExample').DataTable();
  $('.dataTables_length').addClass('bs-select');
});
// select with checkbox
jQuery('#master').on('click', function(e) {
  if ($(this).is(':checked', true)) {
    $(".check").prop('checked', true);
  } else {
    $(".check").prop('checked', false);
  }
});
//bulk approval 
$('.approve').on('click', function() {
  alert("The requisitions have been approved");
  $('td input:checked').closest('tr').remove();
});
//bulk query 
$('.query').on('click', function() {
  alert("The requisitions have been queried");
  ('.check').prop('checked', false);
});
//bulk rejection
$('.remove').on('click', function() {
  confirm("Reject the requisition");
  $('td input:checked').closest('tr').remove();
});

function remove() {
  document.getElementById("dtBasicExample").deleteRow(1);
}
// reject requisition
$(document).ready(function() {
  $(".close").click(function() {
    document.getElementById("dtBasicExample").deleteRow(1);
    $(".modal2").modal("hide");
  });
});
// approve requisition
$(document).ready(function() {
  // code to read selected table row cell data (values).
  $("#dtBasicExample").on('click', '.btn-outline-success', function() {
    // get the current row
    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").text(); // get current row 
    var col2 = currentRow.find("td:eq(2)").text();
    var col3 = currentRow.find("td:eq(3)").text();
    var col4 = currentRow.find("td:eq(4)").text();
    var data = "The requisition with number " +
      col1 + " initiated by " + col2 + " of " + col4 + " " + col3 + " 
    has been approved ";
    document.getElementsByClassName('modal-body')[0].innerHTML = data;
    document.getElementById("dtBasicExample").deleteRow(1);
  });
})
// query requisition
$(document).ready(function() {
  // code to read selected table row cell data (values).
  $("#dtBasicExample").on('click', '.btn-outline-warning', function() {
    // get the current row
    var currentRow = $(this).closest("tr");
    var col1 = currentRow.find("td:eq(0)").text(); // get current row 1st TD 
    value
    var col2 = currentRow.find("td:eq(2)").text(); // get current row 2nd TD
    var col3 = currentRow.find("td:eq(3)").text();
    var col4 = currentRow.find("td:eq(4)").text(); // get current row 3rd TD
    var data = "The requisition with number " + col1 + " initiated by " +
      col2 + " of " + col4 + " " + col3 + " has been queried";
    document.getElementsByClassName('modal-body')[0].innerHTML = data;
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/css/mdb.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div style="position: absolute; right: 40%; z-index:5">
    <button type="button" class="btn btn-default btn-sm approve">Approve</button>
    <button type="button" class="btn btn-warning btn-sm query">Query</button>
    <button type="button" class="btn btn-danger btn-sm remove">Reject</button>
  </div>
  <table id="dtBasicExample" class="table btn-table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th><input type="checkbox" id="master" class=""></th>
        <th class="th-sm">Number<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Location<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Initiator<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Currency<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Amount<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Approve &nbsp; &nbsp; Query &nbsp; &nbsp; &nbsp; &nbsp; Reject</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Yusuf Jimoh</td>
        <td>Naira</td>
        <td>150,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i 
                                                                                                                                        class="fa fa-times"></i></button>
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Toba Jimoh</td>
        <td>Naira</td>
        <td>150,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i class="fa fa-times"></i></button>
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Dauda Jimoh</td>
        <td>Naira</td>
        <td>150,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i class="fa fa-times"></i></button>
        </td>
      </tr>

      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Lateef Jimoh</td>
        <td>Naira</td>
        <td>150,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i class="fa fa-times"></i></button>
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Jimoh Ishola</td>
        <td>Dollar</td>
        <td>350,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i class="fa fa-times"></i></button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Check</th>
        <th>Number</th>
        <th>Location</th>
        <th>Initiator</th>
        <th>Currency</th>
        <th>Amount</th>
        <th>Approve &nbsp; &nbsp; Query &nbsp; &nbsp; &nbsp; &nbsp; Reject
        </th>
      </tr>
    </tfoot>
  </table>
  <!-- Modal for query and approve -->
  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success btn-md" data-dismiss="modal">Ok</button>

        </div>
      </div>
    </div>
  </div>
  <!-- Modal for delete-->
  <div class="modal fade modal2" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">

        </div>
        <div class="modal-body">
          <h3>Reject Requisition ?</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success btn-md close">Yes</button>
          <button type="button" class="btn btn-info btn-md" data-dismiss="modal">No</button>

        </div>
      </div>
    </div>
  </div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- MDBootstrap Datatables  -->
<script type="text/javascript" src="js/addons/datatables.min.js">
</script>

Answer 1

您当前的尝试范围很广$("#dtBasicExample").on('click', '.btn-outline-success', function() {您可以将点击侦听器附加到每一行，并在该点击行的<td>中循环，以创建添加到模态主体。

您还应该使用唯一ID，因此我在第二个模式的ID属性中添加了2。

此外，您还需要遍历每个模式主体（在本例中为2个），并将html替换为数据。

这里是一个例子：

$(document).ready(function() {
  $("tbody tr").on('click', function() {
    let data = "";

    // loop through all the tds in the clicked row and prepare their text
    $(this).find('td').each(function() {
      data += $(this).text() + "<br/>";
    });

    // add the data to all nodes with a class modal-body
    $('.modal-body').each(function() {
      $(this).html(data);
    });

    // show the first modal (for this example only)
    $("#basicExampleModal").modal("show");
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="container">
  <div style="position: absolute; right: 40%; z-index:5">
    <button type="button" class="btn btn-default btn-sm approve">Approve</button>
    <button type="button" class="btn btn-warning btn-sm query">Query</button>
    <button type="button" class="btn btn-danger btn-sm remove">Reject</button>
  </div>
  <table id="dtBasicExample" class="table btn-table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th><input type="checkbox" id="master" class=""></th>
        <th class="th-sm">Number<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Location<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Initiator<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Currency<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Amount<i class="fa fa-sort float-right" aria-hidden="true"></i></th>
        <th class="th-sm">Approve &nbsp; &nbsp; Query &nbsp; &nbsp; &nbsp; &nbsp; Reject</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Yusuf Jimoh</td>
        <td>Naira</td>
        <td>150,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i 
                                                                                                                                        class="fa fa-times"></i></button>
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="" value="" class="check">
        </td>
        <td>PO13238</td>
        <td>Ibese</td>
        <td>Toba Jimoh</td>
        <td>Naira</td>
        <td>150,000</td>
        <td>
          <button type="button" class="btn btn-outline-success btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-warning btn-sm m-0 waves-effect" data-toggle="modal" data-target="#basicExampleModal"><i class="fa fa-check"></i></button>
          <button type="button" class="btn btn-outline-danger btn-sm m-0 waves-effect" data-toggle="modal" data-target=".modal2"><i class="fa fa-times"></i></button>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Check</th>
        <th>Number</th>
        <th>Location</th>
        <th>Initiator</th>
        <th>Currency</th>
        <th>Amount</th>
        <th>Approve &nbsp; &nbsp; Query &nbsp; &nbsp; &nbsp; &nbsp; Reject
        </th>
      </tr>
    </tfoot>
  </table>
  <!-- Modal for query and approve -->
  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success btn-md" data-dismiss="modal">Ok</button>

        </div>
      </div>
    </div>
  </div>
  <!-- Modal for delete-->
  <div class="modal fade modal2" id="basicExampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">

        </div>
        <div class="modal-body">
          <h3>Reject Requisition ?</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success btn-md close">Yes</button>
          <button type="button" class="btn btn-info btn-md" data-dismiss="modal">No</button>

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