La table de données jQuery qui ne trouve pas l'index de ligne de la cellule de l'élément enfant ne peut pas être rendue réactive

Question

J'ai un tableau de données avec des champs de saisie. Lorsqu'un utilisateur entre dans un champ, je dois trouver le numéro de ligne qu'il a saisi. J'ai déjà posé une question et j'ai obtenu une bonne réponse, mais si le tableau de données est réactif et que les champs sont dans une fenêtre contextuelle, la réponse ne fonctionne plus.

Voici mon 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>

Si vous exécutez ce code dans une fenêtre suffisamment grande, cela fonctionnera correctement. Mais si vous réduisez la fenêtre pour que la colonne de droite tombe de manière réactive dans les sous-lignes, le code permettant de trouver l'index de ligne ne fonctionne plus.

Comment retrouver correctement la ligne d'une cellule enfant ?

Answer 1

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

Assez curieusement, table.api().row(this) ne fonctionne que sur les lignes développées, pas sur les lignes d'origine, vous devez donc continuer à utiliser .closest("td") pour obtenir les lignes d'origine.

Plus précisément, table.api().row(...)将返回一个jQuery对象，因此要检查是否返回了任何行，请检查.length === 0.

Donné :

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

Ensuite, .index() donnera l'index de ligne attendu.

Extrait de code mis à jour :

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>