Question

我有一个数据表，当按下<tr>时可以获得该数据表，并显示每行的详细信息，但是最后3列都有按钮，每按一次按钮显示一次Bootstrap的模式也会向我显示该行的详细信息，我必须关闭该模式才能查看按钮的模式

我试图以不同的方式获取列的值，但是我在Internet上找到的值选择了td，然后从那里获得了索引，但是我的点击事件来自<tr>，因此问题

$('#mobis_table tbody').on('click', 'tr', function() {
  var col = $(this).find('td')
  for (var i = 0; i < col.length; i++) {
    console.log(col[i]._DT_CellIndex.column)
  }

  if (col <= 9) {

    var data = table.row(this).data();
    var id = data.id
    $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      }
    });
});

我只想知道选择了哪一列，以免在用户单击最后3列的按钮时显示详细信息。

Answer 1

将index()与this一起使用。使用tr和find来获得length的总长度，如下所示。获得总长度后，您可以借助index轻松地找到它们是否为最后3个。

$('#mobis_table').on('click', 'tr', function() {
  var len = $('#mobis_table').find('tr').length; // You can get total tr length here and add your logic for last 3 columns.
  var num = $(this).index();
  console.log(num);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='mobis_table'>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
</table>

或者，如果您点击td并希望tr索引使用closest()：

$(this).closest("tr").index();

Answer 2

据我所知，您的问题是：当您单击表格行中的按钮时，单击事件会使您的DOM触发该行的DOM触发点击事件（显示行详细信息）。如果是这种情况，您只需在按钮点击处理程序中执行event.stopPropagation()：

//random source data
const srcData = [
  {item: 'apple', cat: 'fruit'},
  {item: 'pear', cat: 'fruit'},
  {item: 'cucumber', cat: 'vegie'}
];

//initialize datatables
const table = $('#example').DataTable({
  data: srcData,
  dom: 't',
  columns: ['item', 'cat'].map(header => ({title: header, data: header})),
  columnDefs: [{targets: 1, render: data => data+'<button class="good">Good button</button><button class="bad">Bad button</button>'}]
});

//emulate row click handler to display row details
$('#example').on('click', 'tr', function(){
  const rowDetails = table.row(this).data();
  console.log(rowDetails);
});

//BAD button click handler
$('#example').on('click', '.bad', function(){
  console.log('Bad button was clicked');
});

//GOOD button click handler
$('#example').on('click', '.good', function(event){
  event.stopPropagation();
  console.log('Good button was clicked');
});

tbody button {
  display: block;
  float: right;
  margin: 5px;
}

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
	<body>
		<table id="example"></table>
	</body>
</html>

Answer 3

首先，我必须从tr的click事件中删除tbody，以便即使按下按钮也可以覆盖该事件。

$('#mobis_table').on('click', 'tr', function () {

然后只需添加event.stopPropagation（）;在我按钮的功能中。

$("#mobis_table").on('click', '.move-mobi', function(event){
  event.preventDefault();
  event.stopPropagation();

jQuery DataTables：如何在单击行按钮时抑制行详细信息模态？

3 个答案: