Eine jQuery-Datentabelle, die den Zeilenindex der Zelle aus dem untergeordneten Element nicht finden kann, kann nicht reaktionsfähig gemacht werden

Question

Ich habe eine Datentabelle mit Eingabefeldern. Wenn ein Benutzer ein Feld betritt, muss ich die eingegebene Zeilennummer finden. Ich habe schon einmal eine Frage gestellt und eine gute Antwort erhalten, aber wenn die Datentabelle responsiv ist und die Felder in einem Popup angezeigt werden, funktioniert die Antwort nicht mehr.

Das ist mein Code:

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>

Wenn Sie diesen Code in einem ausreichend großen Fenster ausführen, funktioniert er einwandfrei. Wenn Sie das Fenster jedoch verkleinern, sodass die rechte Spalte entsprechend in Unterzeilen verschoben wird, funktioniert der Code zum Ermitteln des Zeilenindex nicht mehr.

Wie finde ich die Zeile einer untergeordneten Zelle richtig?

Answer 1

当.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>