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

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()。
或由PARAM名$(row).find("[data-column-id='code']").html()

Answer 2

这个代码不承担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 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

即使您选择了一个答案，正确的方法塞莱CT使用jQuery Bootgrid库中的所有行是这样的（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 DataTable Object

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