i have a very simple table. When i click in a row does i become the id from the clicked column. Any ideas?
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Example:
Click on Country2: country(column id)
Click on Number3: number(column id)
$('#myTable tbody').on('click', 'tr', function () {
alert('clicked in row, but which column?');
}
Best regards
you could check the index of the td with respect row and then find the respected column th id using eq() function of jquery
$('tr td').click(function(){
var a = $(this).index();
var id = $('tr th').eq(a).attr('id')
console.log(id);
})
table ,tr,td{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Get the row index using $(this).index() + 1:
$('#myTable tbody').on('click', 'tr', function () {
alert('You clicked on row '+ ($(this).index() + 1 ) );
});
Use index . Index start with 0 so add 1 .
$('#myTable tbody').on('click', 'tr', function() {
var row = $(this).index() + 1; // Index start with 0 so add 1
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
var $table = $('#myTable'),
$th = $table.find('thead tr th');
$table.find('tbody tr').on('click', 'td', function () {
console.log($th[$(this).index()].id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Hope this helpful.
Html:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable" class="display table-striped">
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</table>
</body>
</html>
Script:
<script>
$('#myTable tbody').on('click','td', function () {
var row = $(this).index() ;
alert(row);
});
</script>
specify the 'td' in the script function. Doing this you will get the column id of the selected column in particular row.
Related
How can I count td in each row, It should say row 1 have two td and row 3 have one td.
I need to count td per row(tr)
$(function() {
$('.Create-New-Order').click(function() {
var total = $('#mytbl td').length;
alert('tr count = ' + total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
You need to loop over each row and then get the number of cells with $(this).find('td').length:
$('.Create-New-Order').click(function() {
var total = $('#mytbl tr').each(function() {
console.log($(this).find('td').length)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
This is easy first get all rows the loop throw each and count the td.
See below
$(function() {
$('.Create-New-Order').click(function() {
var trs=document.querySelectorAll("#mytbl tr")
trs.forEach(function(tr){
console.log(tr.querySelectorAll("td").length)
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table border="1px solid red">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody id="mytbl">
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
<td>tsdaf#ymail.com</td>
</tr>
<tr>
<td>sfdsd</td>
</tr>
</tbody>
</table>
<br>
<br>
Create-New-Order
I need to show another tbody of table on Click. I have following table which is in foreach so there will be multiple buttons.:
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<td class="show-more-button">Show more</td> //It will open first tbody
<tr>
<tr>
<td class="show-more-button">Show more</td> //It will open second tbody
<tr>
<tbody class="show-more"> //First tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<tbody class="show-more"> //Second tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</tbody>
I'm using python with DjangoFramework. And that's the script i came up with. But it only works for changing the 's text but doesn't show the tbody.
<script>
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).parent().children(".show-more").style.display = "block";
} else {
$(this).text("Show more");
$(this).parent().children(".show-more").style.display = "block";
}
});
</script>
and in CSS:
.show-more {
display: none;
}
What error do i have in my script?
Because $(this).parent() will be <tr>. For example you might use closest and find first parent table and there will be able using .children('.show-more'). See an example below.
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).closest('table').children(".show-more").css('display', 'block');
} else {
$(this).text("Show more");
$(this).closest('table').children(".show-more").css('display', 'none');
}
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td class="show-more-button">Show more</td>
<tr>
<tbody class="show-more">
<tr>
<td>John</td>
<td>Doe</td>
<td>27</td>
</tr>
<tr>
<td>Alice</td>
<td>Lo</td>
<td>43</td>
</tr>
<tr>
<td>Linda</td>
<td>Morrison</td>
<td>45</td>
</tr>
</tbody>
</table>
Example changed and i prepared new solution.
$(document).on("click", ".show-more-button", function() {
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($(this).text() == "Show more") {
$(this).text("Show less");
$showMoreElement.css('display', 'block');
} else {
$(this).text("Show more");
$showMoreElement.css('display', 'none');
}
});
.show-more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<!--It will open first tbody -->
<td class="show-more-button" data-more-for="1">Show more</td>
</tr>
<tr>
<!--It will open second tbody -->
<td class="show-more-button" data-more-for="2">Show more</td>
</tr>
</tbody>
<!--First tbody -->
<tbody class="show-more" data-more-id="1">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<!--Second tbody-->
<tbody class="show-more" data-more-id="2">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</table>
Here two ways. Choose anyone. It works well:
$(function(){
$('.show-more-button').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id).toggle();
});
$('.show-more-button2').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id+'_2').toggle();
th_sh();
});
})
function th_sh(){
var o = 0;
$('#call-table2').find('.shows').each(function(){
var u = $(this).css('display') == 'table-row' ? 1 : 0;
o = o + u;
});
o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="shm1" style="display:none;">
<th scope="col">Data1</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2" style="display:none;">
<th scope="col">Data2</th>
<th scope="col">Value</th>
</tr>
<tr class="shm2" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3" style="display:none;">
<th scope="col">Data3</th>
<th scope="col">Value</th>
</tr>
<tr class="shm3" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
<br><hr><br>
<table class="table table-striped" id="call-table2">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="th_disp" style="display:none;">
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1_2 shows" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2_2 shows" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3_2 shows" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin
A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
I want to get the index of a element within the following table when the user clicks on a row.
<table class="table table-hover" id="event_table">
<thead>
<tr>
<th>Event Title</th>
<th>Event Location</th>
<th>Event Time</th>
<th>Event Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gathering</td>
<td>City Centre</td>
<td>10:30</td>
<td>10/09/2016</td>
</tr>
<tr>
<td>Meetup</td>
<td>Some place</td>
<td>12:30</td>
<td>15/09/2016</td>
</tr>
</tbody>
</table>
How would I do this with jQuery?
I have tried something similar to this:
$("#event_table tbody tr").on("click", function() {
$(this).index();
});
Your code works just fine:
$("#event_table").on("click", "tbody tr", function() {
alert($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="event_table">
<thead>
<tr>
<th>Event Title</th>
<th>Event Location</th>
<th>Event Time</th>
<th>Event Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gathering</td>
<td>City Centre</td>
<td>10:30</td>
<td>10/09/2016</td>
</tr>
<tr>
<td>Meetup</td>
<td>Some place</td>
<td>12:30</td>
<td>15/09/2016</td>
</tr>
</tbody>
</table>
I'm using bootstrap table. In that I want to get Item ID value/values of selected table rows after clicking 'Add to cart' button present on same page.
Table code:
<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 code:
$(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';
});
});
As I'm new in bootstrap I'm trying to tackle this but not getting proper solution anybody please advise me this.
Just use the check.bs.table and uncheck.bs.table events to collect your checked rows.
BS-Table Basic Events
Here is an example:
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>
To get the selected (checked) rows, use getSelections method.
Note that if you are using pagination, then you have to use the maintainMetaData table option.
Here is an example which displays selected product's names when user clicks on Show Selected Rows button:
var $table = $('#myTable');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#showSelectedRows').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.name + '\n';
});
alert('The following products are selected: ' + selectedItems);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<div id="toolbar">
<button id="showSelectedRows" class="btn btn-primary" type="button">Show Selected Rows</button>
</div>
<table id="myTable" data-toolbar="#toolbar" data-toggle="table" data-maintain-meta-data="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">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>Chair</td>
<td>$80</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Sofa</td>
<td>$500</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>Desk</td>
<td>$300</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>Rug</td>
<td>$200</td>
</tr>
</tbody>
</table>
Here is example give it to you :
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
Bootstrap table has a function getSelections
with the javascript funciton you can get all selected rows. (your checkobx fiels should be bound to data-field="state")
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.Id
});
}