Fatal编程技术网
  • javascript/
  • Javascript 迭代JQuery Bootgrid表中的行并提取值？

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

javascript jquery

Javascript 迭代JQuery Bootgrid表中的行并提取值？,javascript,jquery,jquery-bootgrid,Javascript,Jquery,Jquery Bootgrid,我试图迭代jquerybootgrid表中的项目列表，并提取要在其他地方使用的值。这是我的伪代码： for（或表中的每一行）{ var code=数据列id=“code”中的值； var latitude=数据列id=“lat”中的值； var longitude=数据列id=“long”中的值； 控制台日志（“代码：”+代码）； Console.log（“纬度：+纬度”）； log（“经度：”+经度）； } 符号代码 纬度 经度 您可以在所有行中循环，并访问它所在的子行所在的元素 $

我试图迭代jquerybootgrid表中的项目列表，并提取要在其他地方使用的值。这是我的伪代码：

for（或表中的每一行）{
var code=数据列id=“code”中的值；
var latitude=数据列id=“lat”中的值；
var longitude=数据列id=“long”中的值；
控制台日志（“代码：”+代码）；
Console.log（“纬度：+纬度”）；
log（“经度：”+经度）；
}

符号代码
纬度
经度
您可以在所有行中循环，并访问它所在的子行所在的元素

   $("#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\u值、.lat\u值、.lng\u值
，并在
each（）
中以
$（行）的形式访问它们。查找（“.code\u值”）.html（）

或者通过param name
$（row）查找它们。find（“[data column id='code']”）。html（）

您可以在所有行中循环，并访问它所在的子行所在的元素

   $("#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\u值、.lat\u值、.lng\u值
，并在
each（）
中以
$（行）的形式访问它们。查找（“.code\u值”）.html（）

或者通过参数名
$（行）查找它们。查找（“[数据列id='code']”）。html（）

此代码不承担每组
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);
});
本代码不承担每组
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);
});
我认为您正在寻找BootGrid选择方法

var rows=$（“#或表”）.bootgrid（“选择”）
我想您正在寻找BootGrid选择方法




var rows=$（“#或表”）.bootgrid（“选择”）
这假设您的
元素具有
数据列id
属性：



$（'tbody tr'）。每个（函数（idx，行）{
var code=$（行）.find（'[data column id=“code”]'）.html（）；
var latitude=$（行）.find（'[data column id=“lat”]'）.html（）；
var longitude=$（行）.find（'[data column id=“long”]'）.html（）；
控制台日志（“代码：”+代码）；
console.log（“纬度：+纬度”）；
log（“经度：”+经度）；
});


符号代码
纬度
经度
1.
2.
3.
4.
5.
6.

这假设您的
元素具有
数据列id
属性：



$（'tbody tr'）。每个（函数（idx，行）{
var code=$（行）.find（'[data column id=“code”]'）.html（）；
var latitude=$（行）.find（'[data column id=“lat”]'）.html（）；
var longitude=$（行）.find（'[data column id=“long”]'）.html（）；
控制台日志（“代码：”+代码）；
console.log（“纬度：+纬度”）；
log（“经度：”+经度）；
});


符号代码
纬度
经度
1.
2.
3.
4.
5.
6.

即使选择了答案，使用jQuery Bootgrid库选择所有行的正确方法如下（）：

数据表：


<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数据表对象


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



//DT对象
log（dt.data（'.rs.jquery.bootgrid'））
//表中的行
log（dt.data（'.rs.jquery.bootgrid'）.rows）
//使用Ajax+分页
log（dt.data（'.rs.jquery.bootgrid'）.currentRows）
var rows=dt.data（'.rs.jquery.bootgrid'）.rows；
对于（变量i=0；i
即使选择了答案，使用jQuery Bootgrid库选择所有行的正确方法如下（）：

数据表：


<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数据表对象


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



//DT对象
log（dt.data（'.rs.jquery.bootgrid'））
//表中的行
log（dt.data（'.rs.jquery.bootgrid'）.rows）
//使用Ajax+分页
log（dt.data（'.rs.jquery.bootgrid'）.currentRows）
var rows=dt.data（'.rs.jquery.bootgrid'）.rows；
对于（变量i=0；i
我厌倦了将其更改为“$”（'or-table tbody tr'）。每个（函数（idx，row）{”但它始终返回未定义。选择器应该是
#或table
对不起，这是一个输入错误。它是“$”（“#或table tbody tr”）。每个（函数（idx，row）{）。我不确定原因，因为$（“#或table tr”）在使用$（“：n子（1）”，row）时工作正常。html（）；方法而不是$（row）.find（'[data column id=“code”]'）.html（）；。@J.Titus Bootgrid已经能够将行选择为对象jquery Bootgrid.com/Documentation#properties-请参阅我下面的答案-我厌倦了将其更改为“$（'or-table tbody tr'）。每个（函数（idx，row）{”但是它总是返回未定义的。选择器应该是
#或table
对不起，是一个输入错误。它是“$”（“#或table tbody tr”）。每个（函数（idx，row）{。我不知道为什么，因为$（“#或table tr”）在使用$（“：nth child（1）”，row.html（）方法时效果很好，而不是上面的$（row）。find（“[data column id=”code“）。html（）.@J.Titus Bootgrid已经能够将行选择为对象jquery Bootgrid.com/Documentation#properties-请参阅下面的答案-我很难找到如何使用select方法的示例。我认为我给出的示例会起作用。Bootgrid文档说它返回jquery对象。我从未使用过Bootgrid，所以我我有点胡扯。上面的答案基本上做了相同的事情，因此您可以使用其中一个。那么我如何访问这些值呢？console.log（“code:+rows.？）；我不确定select方法返回的确切内容，但您可能会使用jQuery的each方法来迭代每一行，然后使用jQuery的find方法来执行