Question

我正在尝试迭代Jquery Bootgrid表中的项列表，并提取要在别处使用的值。这是我的伪代码：

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>

我只想遍历表中的行并将单元格中的值保存到变量中。我一直无法找到使用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);
    });

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

找到它们

Answer 2

这假设您的<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 3

此代码不假设每组th代码中tr代码的位置，顺序或排他性。

$("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 4

即使您选择了答案，使用jQuery Bootgrid库选择所有行的正确方法也是这样（strsplit）：

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

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

DataTable：

<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: {},
    });

然后访问Rows和Bootgrid DataTable对象

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

Answer 5

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

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

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

迭代JQuery Bootgrid表中的行并提取值？

5 个答案: