Question

我需要在表中编辑值，其中行/单元格是由Bootgrid动态生成的，因此它们没有html id。我目前通过转到tr：nth-child来执行此操作，但这仅在我为rowID设置的值对应于表中的该位置时才有效。

例如：如果我从表中删除第3项，则rowID = 4的项目现在是tr的第3个子项，以下代码将编辑错误的单元格。

我需要能够找到要按ID编辑的正确行，而不是在网格中的位置。我昨天发布了一个类似的问题，但我已经改进了这个问题，以便更好地澄清我想要做的事情。

＆＃13;

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

＆＃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>
      <!-- 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>

＆＃13;

Answer 1

您可以使用以下选择器

tr

选择相关的2元素。

显然，您应该根据您想要实现的目标更改<!DOCTYPE html> <html> <head> <title>Blur Testing</title> <meta name="content-type" content="text/html; charset=UTF-8"> <style> body { margin: 0; } #item { background: url("http://i66.tinypic.com/2z6uq9f.jpg"); background-size: cover; background-position: center; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> </head> <body> <canvas id="item"></canvas> <script> var canvas = document.getElementById('item'); var ctx = canvas.getContext('2d'), img = new Image, radius = 30; canvas.width = window.innerWidth; canvas.height = window.innerHeight; $('#item').css({ "-webkit-filter": "blur(0px)", "filter": "blur(0px)" }); $(img).on('load', function () { $('#item').mouseover(function (e) { erase(getXY(e)); }).mousemove(function (e) { erase(getXY(e)); //setTimeout(redraw(getXY(e)), 400); }); ctx.drawImage(img, 0, 0); ctx.globalCompositeOperation = 'destination-out'; }); img.src = 'http://i64.tinypic.com/14mt7yx.jpg'; img.width = window.width; img.height = window.height; function getXY(e) { var r = $('#item')[0].getBoundingClientRect(); return {x: e.clientX - r.left, y: e.clientY - r.top}; } // function redraw(pos) { // ctx.globalCompositeOperation = 'source-in'; // ctx.beginPath(); // ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); // ctx.closePath(); // ctx.fill(); // }; function erase(pos) { ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); } </script> </body> </html>值：）

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)

Answer 4

如果您在任何单元格中都有 Id ，则以下内容应该适用

 document.getElementById("myID "+tempIdx).parentNode.parentNode.rowIndex;

提供的表格采用以下格式

<table>
<tr>
    <td>
        <p id="myID 1" />
    </td>
    <td></td>
</tr>
<td></td>
<td>
    <p id="myID 2" />
</td>
</tr>
<td>
    <p id="myID 3" />
</td>
</tr>

按ID查找表格行并编辑其单元格？

4 个答案: