遍历 JQuery Bootgrid table 中的行并提取值？

Question

我正在尝试遍历 Jquery Bootgrid table 中的项目列表并提取要在其他地方使用的值。这是我的伪代码：

for (each row in or-table) {
  var code = the value in data-column-id="code";
  var latitude = the value in data-column-id="lat";
  var longitude = the value in data-column-id="long";
  
  Console.log("code: " + code);
  Console.log("latitude: " + latitude);
  Console.log("longitude: " + longitude);
}

<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code" >Symbol Code</th>
      <th data-column-id="lat" >Latitude</th>
      <th data-column-id="long" >Longitude</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

我只想遍历 table 中的行并将单元格中的值保存到变量中。我一直无法找到使用 Bootgrid 的示例。

Answer 1

您可以遍历所有行并访问其中的元素。

   $("#or-table tr").each(function(i, row){
      var code = $(":nth-child(1)", row).html();
      var latitude = $(":nth-child(2)", row).html();
      var longitude = $(":nth-child(3)", row).html();

      Console.log("code: " + code);
      Console.log("latitude: " + latitude);
      Console.log("longitude: " + longitude);
    });

如果不是这样，请将 class 添加到每个单元格类型，例如 .code_value, .lat_value, .lng_value 并在 each() 中以 $(row).find(".code_value").html() 访问它们。
或者通过参数名称 $(row).find("[data-column-id='code']").html()

找到它们

Answer 2

此代码不假定每组 tr 标签中 th 标签的位置、顺序或排他性。

$("tr").each(function(row){
    var code = row.find("th[data-column-id='code']").text()
    var latitude = row.find("th[data-column-id='lat']").text()
    var longitude = row.find("th[data-column-id='long']").text()

    Console.log("code: " + code);
    Console.log("latitude: " + latitude);
    Console.log("longitude: " + longitude);
});

Answer 3

我认为您正在寻找 BootGrid select 方法。

http://www.jquery-bootgrid.com/Documentation#methods

var rows = $("#or-table").bootgrid("select");

Answer 4

假设您的 <td> 元素具有 data-column-id 属性：

$('tbody tr').each(function(idx, row) {
  var code = $(row).find('[data-column-id="code"]').html();
  var latitude = $(row).find('[data-column-id="lat"]').html();
  var longitude = $(row).find('[data-column-id="long"]').html();

  console.log("code: " + code);
  console.log("latitude: " + latitude);
  console.log("longitude: " + longitude);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code">Symbol Code</th>
      <th data-column-id="lat">Latitude</th>
      <th data-column-id="long">Longitude</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column-id="code">1</td>
      <td data-column-id="lat">2</td>
      <td data-column-id="long">3</td>
    </tr>
    <tr>
      <td data-column-id="code">4</td>
      <td data-column-id="lat">5</td>
      <td data-column-id="long">6</td>
    </tr>
  </tbody>
</table>

Answer 5

即使您已经 select 编辑了答案，使用 jQuery Bootgrid 库 select 所有行的正确方法是这样的 (Fiddle):

// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)

//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)

数据表：

<table id="employeeList" class="table table-bordered table-condensed table-hover">
  <thead>
    <tr>
      <th data-column-id="iEmployeeId" data-type="numeric" data-visible="false" data-identifier="true" data-noresize>Id</th>
      <th data-column-id="sName" data-order="desc">Name</th>
      <th data-column-id="sAddress">Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>dsa</td>
      <td>asd</td>
    </tr>
    <tr>
      <td>2</td>
      <td>sss</td>
      <td>assd</td>
    </tr>

    <tr>
      <td>3</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>4</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>5</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>6</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>7</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>8</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>9</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>10</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>11</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

  </tbody>
</table>

然后初始化BootGrid对象：

    var dt = $('#employeeList').bootgrid({
      selection: true,
      rowSelect: true,
      converters: {},
    });

然后访问行和 Bootgrid 数据表对象

// the DT object
console.log(dt.data('.rs.jquery.bootgrid'))

// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)

//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)

var rows = dt.data('.rs.jquery.bootgrid').rows;

for(var i = 0; i < rows.length; i++)
{
    console.log(rows[i].iEmployeeId);
  console.log(rows[i].sName);
}

遍历 JQuery Bootgrid table 中的行并提取值？

Iterate over rows in JQuery Bootgrid table and extract values?

javascript

jquery

jquery-bootgrid