Find a table row by ID and edit its cells?
<p>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. </p>

<p>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.</p>

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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());</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- This is the table: --&gt;

&lt;table id="or-table" class="table table-condensed table-hover table-striped bootgrid-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
         &lt;th data-column-id="id" data-identifier="true" data-type="numeric"&gt;ID&lt;/th&gt;
         &lt;th data-column-id="aff" align="center"&gt;Affiliation&lt;/th&gt;
         &lt;th data-column-id="code"&gt;Symbol Code&lt;/th&gt;
         &lt;th data-column-id="lat"&gt;Latitude&lt;/th&gt;
         &lt;th data-column-id="long"&gt;Longitude&lt;/th&gt;
         &lt;th data-column-id="commands" data-formatter="commands" data-sortable="false"&gt;Commands&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;!-- These tr/td generated by Bootgrid: --&gt;
      &lt;tr data-row-id="1"&gt;
        &lt;td class="select-cell" style="{{ctx.style}}"&gt;
        &lt;td class="text-left" style=""&gt;1&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;H&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;SHG-EVAI-------&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;35.39135902572556&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;-116.52048110961914&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;
      &lt;/tr&gt;
      &lt;tr data-row-id="2"&gt;
        &lt;td class="select-cell" style="{{ctx.style}}"&gt;
        &lt;td class="text-left" style=""&gt;2&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;H&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;SHG-EVAT-------&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;35.40241360341436&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;-116.52648925781249&lt;/td&gt;
        &lt;td class="text-left" style=""&gt;
      &lt;/tr&gt;      
    &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>