Question

与数据表结合，我使用以下代码隐藏/显示更多细节，它适用于行级而不是第一列（我希望这样）。同时我也在其中一个列中有复选框。

问题是当我点击复选框时，它会显示/隐藏整行。

如何让我点击复选框而不触发隐藏/显示？

＆＃13;

$(document).ready(function() {
  $('#myTable').DataTable({
    responsive: {
      details: {
        type: 'column',
        target: 'tr'
      }
    },
    columnDefs: [{
      className: 'control',
      targets: 0,
      orderable: false
    }],
    searching: false
  });
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>My Company</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
  <link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>

  <style>
    .big-checkbox {
      width: 20px;
      height: 20px;
    }
  </style>
</head>

<body>
  <div class="table-responsive">
    <table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th>ID</th>
          <th>Company</th>
          <th>Invoice No.</th>
          <th>Due Date</th>
          <th>Invoice Amount</th>
          <th>Outstanding Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td><input type="checkbox" class="big-checkbox"></td>
          <td>1</td>
          <td>ABC Company</td>
          <td>C1010</td>
          <td>2017-09-27 00:00:00</td>
          <td>111</td>
          <td>28</td>
          <td>PENDING</td>
          <td>
            <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
          </td>
        </tr>
        <tr>
          <td></td>
          <td><input type="checkbox" class="big-checkbox"></td>
          <td>2</td>
          <td>Zoozle Inc</td>
          <td>C0432</td>
          <td>2017-09-27 00:00:00</td>
          <td>111</td>
          <td>28</td>
          <td>Completed</td>
          <td>
            <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
</body>

</html>

＆＃13;

Answer 1

立即尝试

你需要绑定点击事件复选框，需要使用stopPropagation（）;防止传递给其父级的点击事件。

＆＃13;

$(document).ready(function() {
  $("input[type='checkbox']").click(function(e){
      debugger;
      e.stopPropagation();
  });
  $('#myTable').DataTable({
    responsive: {
      details: {
        type: 'column',
        target: 'tr'
      }
    },
    columnDefs: [{
      className: 'control',
      targets: 0,
      orderable: false
    }],
    searching: false
  });
});

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>My Company</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
  <link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap.min.css" rel="stylesheet"/>

  <style>
    .big-checkbox {
      width: 20px;
      height: 20px;
    }
  </style>
</head>

<body>
  <div class="table-responsive">
    <table id="myTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th>ID</th>
          <th>Company</th>
          <th>Invoice No.</th>
          <th>Due Date</th>
          <th>Invoice Amount</th>
          <th>Outstanding Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td><input type="checkbox" class="big-checkbox"></td>
          <td>1</td>
          <td>ABC Company</td>
          <td>C1010</td>
          <td>2017-09-27 00:00:00</td>
          <td>111</td>
          <td>28</td>
          <td>PENDING</td>
          <td>
            <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
          </td>
        </tr>
        <tr>
          <td></td>
          <td><input type="checkbox" class="big-checkbox"></td>
          <td>2</td>
          <td>Zoozle Inc</td>
          <td>C0432</td>
          <td>2017-09-27 00:00:00</td>
          <td>111</td>
          <td>28</td>
          <td>Completed</td>
          <td>
            <a href="#" data-id="1" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
</body>

</html>

＆＃13;

Answer 2

问题是每次绘制表时，响应式扩展会将四个事件处理程序附加到<tbody>。

因此，必须在每次绘制后重新生成覆盖响应的处理程序：

drawCallback: function() {
  $('#example tbody td').on('keyup mouseup mousedown click', function(e) {
    if (e.target.type == 'checkbox') {
      e.stopPropagation()
    }  
  })
},

演示 - ＆gt;的 http://jsfiddle.net/eyLne5e7/

单击复选框时禁用行隐藏/显示

2 个答案: