使用jquery獲取引導程序中選定錶行的值

Question

我正在使用引導程序表。在這裏我想在點擊'Add to cart'按鈕出現在同一頁面後獲得所選表格的Item ID值/值。

表代碼：

<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/data2.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true"> 
    <thead> 
    <tr> 
     <th data-field="state" data-checkbox="true"></th> 
     <th data-field="id" >Item ID</th> 
     <th data-field="name" data-sortable="true">Product Name</th> 
     <th data-field="price" data-sortable="true">Actual Price</th> 
     <th data-field="discount_price" data-sortable="true">Discount Price</th> 
     <th data-field="stock_avail" data-sortable="true">Stock Available</th> 
    </tr> 
    </thead> 
</table> 

jQuery代碼：

$(document).ready(function() 
{ 
    $("#add_cart").click(function() 
    { 
     //foreach selected row retrieve 'Item ID' values in array; 
     //call ajax for otherpage.php?arr='Item ID array'; 
    }); 
}); 

由於我是新在引導我試圖解決這個，但沒有得到妥善的解決辦法有誰請告訴我這一點。

Answer 1

只需使用check.bs.table和uncheck.bs.table事件來收集您檢查的行。

BS-Table Basic Events

下面是一個例子。

var checkedRows = []; 
 

 
$('#eventsTable').on('check.bs.table', function (e, row) { 
 
    checkedRows.push({id: row.id, name: row.name, forks: row.forks}); 
 
    console.log(checkedRows); 
 
}); 
 

 
$('#eventsTable').on('uncheck.bs.table', function (e, row) { 
 
    $.each(checkedRows, function(index, value) { 
 
    if (value.id === row.id) { 
 
     checkedRows.splice(index,1); 
 
    } 
 
    }); 
 
    console.log(checkedRows); 
 
}); 
 

 
$("#add_cart").click(function() { 
 
    $("#output").empty(); 
 
    $.each(checkedRows, function(index, value) { 
 
    $('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks)); 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script> 
 

 
<table id="eventsTable" 
 
     data-toggle="table" 
 
     data-height="300" 
 
     data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1" 
 
     data-pagination="true" 
 
     data-search="true" 
 
     data-show-refresh="true" 
 
     data-show-toggle="true" 
 
     data-show-columns="true" 
 
     data-toolbar="#toolbar"> 
 
    <thead> 
 
    <tr> 
 
     <th data-field="state" data-checkbox="true"></th> 
 
     <th data-field="name">Name</th> 
 
     <th data-field="stargazers_count">Stars</th> 
 
     <th data-field="forks_count">Forks</th> 
 
     <th data-field="description">Description</th> 
 
    </tr> 
 
    </thead> 
 
</table> 
 

 
<button id="add_cart">Add to card</button> 
 
<ul id="output"></ul>

Answer 2

我這裏是給你：

HTML

<table id="table-style"> 
<thead> 
    <tr> 
     <th data-field="state" data-checkbox="true"></th> 
     <th data-field="id">Item ID</th> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>5</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>15</td> 
    </tr> 
    <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td>10</td> 
    </tr> 
</thead> 
</table> 

<button>Add to cart</button> 

JS

var arr; 
$('button').click(function(){ 
    arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){ 
     return $(this).closest('tr').find('td:nth-child(2)').text(); 
    }).get(); 

    console.log(arr); 
}); 

DEMO