Question

我需要在动态生成行/单元格的表中编辑值，这样我们就没有html id。我目前通过转到tr：nth-child来执行此操作，但这仅在我为rowID设置的值对应于表中的该位置时才有效。例如：如果我从表中删除第3项，则rowID = 4的项目现在是tr的第3个子项，以下代码将编辑错误的单元格。

＆＃13;

// I get the rowID like this:
rowID = $(this).data("row-id");


// This is what I'm doing now to edit the table:

        $('#or-table tr:nth-child(' + rowID + ') td:nth-child(3)').html($('#aff-selector').val());
        $('#or-table tr:nth-child(' + rowID + ') td:nth-child(4)').html($('#editor-code').val());
        $('#or-table tr:nth-child(' + rowID + ') td:nth-child(5)').html($('#editor-lat').val());
        $('#or-table tr:nth-child(' + rowID + ') td:nth-child(6)').html($('#editor-long').val());

＆＃13;

<!-- This is the table: -->

<table id="or-table" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
            <th data-column-id="aff" align="center">Affiliation</th>
            <th data-column-id="code">Symbol Code</th>
            <th data-column-id="lat">Latitude</th>
            <th data-column-id="long">Longitude</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

＆＃13;

Answer 1

您可以使用for循环动态分配行ID，然后在每次删除行时重做该计算。

function foo () {

var rowCount = $('#or-table tbody tr').length;
for (i=1;i <= rowCount; i++) {
   $('#or-table tbody tr:nth-child("'+i+'")').data('row', i);
}

}

您可以在$（document）.ready上运行此函数，并在删除任何行后再次运行。

Answer 2

使用HTMLTableElement interface。顺便说一句，为什么你需要删除<td>？仅仅删除内部 <td>

的数据会不会更容易？

获取对<table>的引用

- var or = document.getElementById('or-table');
然后使用.rows属性。

- or.rows[0] // first row of table
接下来，使用.cells属性。

- or.rows[0].cells[2] // first row, 3rd cell
最后，使用innerHTML或textContent修改单元格的值。

- or.rows[0].cells[2].innerHTML='test' // set first row, 3rd cell content to "test"

以下代码段演示了如何使用HTMLTableElement接口：

段

＆＃13;

var or = document.getElementById('or-table');

function seekCell(row, cell) {
  var data = document.getElementById('data').value;
  var row = parseInt(row, 10);
  var cell = parseInt(cell, 10);
  var rows = or.rows.length; // max number of rows
  var cells = rows * 6; //max number of cells

  (row > rows) ? row = rows: row = row - 1;
  (cell > cells) ? cell = cells: cell = cell - 1;
  var tgt = or.rows[row].cells[cell];
  tgt.innerHTML = data;
}

＆＃13;

[type='number'] {
  width: 30px;
}

＆＃13;

<!-- This is the table: -->

<table id="or-table" class="table table-condensed table-hover table-striped bootgrid-table">
  <thead>
    <tr>
      <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
      <th data-column-id="aff" align="center">Affiliation</th>
      <th data-column-id="code">Symbol Code</th>
      <th data-column-id="lat">Latitude</th>
      <th data-column-id="long">Longitude</th>
      <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td>
      <td>NONE</td>
      <td></td>
      <td>20</td>
      <td>30</td>
      <td>KILL</td>
    </tr>
    <tr>
      <td>02</td>
      <td>NONE</td>
      <td></td>
      <td>30</td>
      <td>30</td>
      <td>EDIT</td>
    </tr>
  </tbody>
</table>
<form id='f1' name='f1' onsubmit='seekCell(row.value, cell.value)'>
  <fieldset>
    <legend>Row &amp; Cell</legend>
    <label>Row:
      <input id='row' name='row' type='number' min='1' max='99'>
    </label>
    <label> <small>Note: The first row is the &lt;thead&gt;</small>
    </label>
    <br/>
    <label>Cell:
      <input id='cell' name='cell' type='number' min='1' max='6'>
    </label>
    <label><small> Note: The number will be adjusted for 0-Index enumeration. (i.e. input -1)</small>
    </label>
    <br/>
    <label>Data:
      <input id='data'>
    </label>
    <input type='submit'>
  </fieldset>
</form>

＆＃13;

将值写入td没有id？

2 个答案:

段