IDで表の行を探し、セルを編集しますか？

Question

行/セルがBootgridによって動的に生成され、html idを持たないテーブルの値を編集する必要があります。私は現在、tr：nth-​​childに行くことでこれをやっていますが、これはrowIDに設定した値がテーブル内のその位置に対応している場合にのみ有効です。

例：テーブルから3番目のアイテムを削除すると、rowID = 4のアイテムがtrの3番目の子になり、次のコードは間違ったセルを編集します。

グリッドの位置ではなく、IDで編集する正しい行を見つける必要があります。私は昨日同様の質問を掲載しましたが、私がしようとしていることをより明確にするためにこれを改善しました。

// 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 1

あなたは、関連するtr要素を選択するには、次のセレクタ

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

を利用することができます。

もちろん、あなたが達成したいものに応じて2値を変更する必要があります:)

Answer 2

これはあなたのコード内であまりにも複雑です。 ;）

// you have the row already? Use it! 
var columns = $('td', this); 

// 'eq()' gives you the column by index 
columns.eq(3).html($('#aff-selector').val()); 
columns.eq(4).html($('#editor-code').val()); 
columns.eq(5).html($('#editor-lat').val()); 
columns.eq(6).html($('#editor-long').val()); 

それとも、rowID以上選択する場合：この

var columns = $('tr[data-row-id=' + rowID + '] td'); 

columns.eq(3).html($('#aff-selector').val()); 
columns.eq(4).html($('#editor-code').val()); 
columns.eq(5).html($('#editor-lat').val()); 
columns.eq(6).html($('#editor-long').val()); 

Answer 3

チェックアウト：https://jsfiddle.net/fsbwhhu4/

function find_in_table(table, column, row) { 
    var table = $(table) 
    var column_index = table.find('thead tr [data-column-id=' + column + ']').index() 
    var row = table.find('tr[data-row-id="' + row + '"]') 

    return row.find('td').eq(column_index) 
} 

// Usage: 
find_in_table('#or-table', 'lat', 1)