bicycle_guy bicycle_guy - 3 months ago 16
HTML Question

Find a table row by ID and edit its cells?

I need to edit values in a table where the rows/cells are generated dynamically by Bootgrid so they have no html id. I am currently doing this by going to tr:nth-child, but this only works if the value I set for rowID corresponds to that position in the table.

Ex: If I remove the 3rd item from the table, the item with rowID=4 is now the 3rd child of the tr, and the following code will edit the wrong cells.

I need to be able to find the correct row to edit by ID, not position in the grid. I posted a similar question yesterday, but I have improved this to better clarify what I am trying to do.



// I get the rowID by clicking an Edit button on the table row, 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());

<!-- 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>
<!-- These tr/td generated by Bootgrid: -->
<tr data-row-id="1">
<td class="select-cell" style="{{ctx.style}}">
<td class="text-left" style="">1</td>
<td class="text-left" style="">H</td>
<td class="text-left" style="">SHG-EVAI-------</td>
<td class="text-left" style="">35.39135902572556</td>
<td class="text-left" style="">-116.52048110961914</td>
<td class="text-left" style="">
</tr>
<tr data-row-id="2">
<td class="select-cell" style="{{ctx.style}}">
<td class="text-left" style="">2</td>
<td class="text-left" style="">H</td>
<td class="text-left" style="">SHG-EVAT-------</td>
<td class="text-left" style="">35.40241360341436</td>
<td class="text-left" style="">-116.52648925781249</td>
<td class="text-left" style="">
</tr>
</tbody>
</table>




Answer

You can make use of the following selector

$("#or-table tr[data-row-id='2']")

to select the relevant tr element.

Obviously you should change the 2 value depending on what you want to achieve :)