首页  >  问答  >  正文

无法从子元素中找到单元格的行索引的jQuery数据表格无法实现响应式

我有一个带有输入字段的数据表。当用户输入到一个字段时,我需要找到他们输入的行号。我之前问过一个问题,并得到了一个很好的答案,但是如果数据表是响应式的,并且字段在子弹出窗口中,答案就不再起作用了。

这是我的代码:

function drawInput(data, type, row, meta) {
  return '<input id="r' + meta.row + 'c' + meta.col + '" val="' + data + '"></input>';
}
var data = [{
  c1: 'r1c1',
  c2: 'r1c2',
  c3: 'r1c3'
}, {
  c1: 'r2c1',
  c2: 'r2c2',
  c3: 'r2c3'
}];
$(function() {
  var table = $('table').dataTable({
    info: false,
    searching: false,
    ordering: false,
    paging: false,
    columns: [{
        defaultContent: '<span></span>'
      },
      {
        data: 'c1',
        name: 'c1',
        defaultContent: '<input></input>',
        render: drawInput
      },
      {
        data: 'c2',
        name: 'c2',
        defaultContent: '<input></input>',
        render: drawInput
      },
      {
        data: 'c3',
        name: 'c3',
        defaultContent: '<input></input>',
        render: drawInput
      }
    ]
  });
  table.api().rows.add(data);
  table.api().draw();
  $('body').on('change', 'table :input', function(e) {
    // 找到包含输入字段的行
    //console.log(this);
    var row = table.api().row($(this).closest('td'));
    // 显示行索引 - 结果为undefined!为什么?
    console.log(row.index());
  });
});
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

<div style='width:150px;'>
<table width="100%" class="responsive">
  <thead>
    <tr>
      <th></th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
</table>
</div>

如果你在一个足够大的窗口中运行这个代码,它就可以正常工作。但是如果你缩小窗口,使得右边的列响应式地下降到子行中,找到行索引的代码就不再起作用了。

如何正确找到子单元格的行?

P粉916760429P粉916760429423 天前642

全部回复(1)我来回复

  • P粉722521204

    P粉7225212042023-09-13 15:55:25

    .row($(this).closest("td")).index()未定义时,使用table.api().row(this).index()

    奇怪的是,table.api().row(this)只适用于展开的行,而不是原始行,所以需要继续使用.closest("td")来获取原始行。

    具体来说,table.api().row(...)将返回一个jQuery对象,因此要检查是否返回了任何行,请检查.length === 0

    给出:

    let row = table.api().row($(this).closest("td"))
    if (row.length === 0) row = table.api().row(this);

    然后.index()将给出预期的行索引。

    更新的代码片段:

    function drawInput(data, type, row, meta) {
      return '<input id="r' + meta.row + 'c' + meta.col + '" val="' + data + '"></input>';
    }
    var data = [{
      c1: 'r1c1',
      c2: 'r1c2',
      c3: 'r1c3'
    }, {
      c1: 'r2c1',
      c2: 'r2c2',
      c3: 'r2c3'
    }];
    $(function() {
      var table = $('table').dataTable({
        info: false,
        searching: false,
        ordering: false,
        paging: false,
        columns: [{
            defaultContent: '<span></span>'
          },
          {
            data: 'c1',
            name: 'c1',
            defaultContent: '<input></input>',
            render: drawInput
          },
          {
            data: 'c2',
            name: 'c2',
            defaultContent: '<input></input>',
            render: drawInput
          },
          {
            data: 'c3',
            name: 'c3',
            defaultContent: '<input></input>',
            render: drawInput
          }
        ]
      });
      table.api().rows.add(data);
      table.api().draw();
      $('body').on('change', 'table :input', function(e) {
        // Find the row that contains the input field
        console.log(this.id, this.name, table.api().row($(this).closest("td")).index(), table.api().row(this).index());
        
        var row = table.api().row($(this).closest("td"))
        if (row.length === 0) row = table.api().row(this);
        // Show the row index - result is undefined! Why?
        console.log(row.index());
      });
    });
    <link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    
    <div style='width:150px;'>
    <table width="100%" class="responsive">
      <thead>
        <tr>
          <th></th>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
        </tr>
      </thead>
      <tbody>
    </table>
    </div>

    回复
    0
  • 取消回复