Найдите строку таблицы по идентификатору и отредактируйте ее ячейки?

Мне нужно редактировать значения в таблице, где строки/ячейки генерируются динамически Bootgrid, поэтому у них нет html-идентификатора. В настоящее время я делаю это, перейдя в tr: nth-child, но это работает, только если значение, заданное для rowID, соответствует этой позиции в таблице.Найдите строку таблицы по идентификатору и отредактируйте ее ячейки?

Ex: Если я удаляю третий элемент из таблицы, элемент с rowID = 4 теперь является третьим дочерним элементом tr, а следующий код будет редактировать неправильные ячейки.

Мне нужно найти правильную строку для редактирования по 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>

источник

2016-08-12 bicycle_guy

как вы инициируя это? это щелчок на кнопке? вы нажимаете на строку? Я думаю, что это можно сделать намного проще, если вы предоставите более подробную информацию. –

Инициируется нажатием кнопки «Редактировать» в строке таблицы. –

, поэтому вы можете использовать '$ (this) .parent()', который даст вам родительскую кнопку нажатой кнопки (которая может/должна быть 'tr'). вы можете показать мне, где кнопка редактирования находится в html и как она выглядит? –

Вы можете использовать следующий селектор

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

выбрать соответствующий tr элемент.

Очевидно, что вы должны изменить значение 2 в зависимости от того, что вы хотите достичь :)

источник

2016-08-12 13:50:01

Это слишком сложно в вашем коде. ;)

// 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());

источник

2016-08-12 13:50:25 eisbehr

Проверьте это: 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)

источник

2016-08-12 13:57:55

Найдите строку таблицы по идентификатору и отредактируйте ее ячейки?

ответ

Смежные вопросы