Develop Reference

How to add a class if the number of rows in a table is some number with Javascript/jQuery

I am trying to add class to div if the number of rows in the table is larger than 3.
This is my code.
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$this.find('.box').addClass('newclass');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
I don't see why this code not working, can somebody try to help me with this?
What I try to achieve is this:
<div class="box newclass">

Your code isn't working because this is a reference to the .box element itself. When you do a find() from there you're looking for child elements, so nothing it returned. To fix the issue just remove the find() call.
However you can make the jQuery more succinct by simply using the :has() selector to retrieve .box elements which have more than 3 tr within them:
$('.box:has(tbody > tr:eq(3))').addClass('newclass');
.newclass { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
</tbody>
</table>
</div>

you already set the $this to the selector. and by now using $this.find will try to find inside the element itself, so u can use $this directly or search the document itself $(document).find instead of $this.find >>> try the button to show classes list
$('.box').each(function () {
var $this=$(this);
if ($this.find('tbody > tr').length > 3) {
$(document).find('.box').addClass('newclass');
}
});
$('button').on('click', function() {
console.log($(document).find('.box').attr('class'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<table>
<thead>
<tr>
<th >1</th>
<th >2</th>
</tr>
</thead>
<tbody>
<tr>
<td>lorem1</td>
<td>ipsum1</td>
</tr>
<tr>
<td>lorem2</td>
<td>ipsum2</td>
</tr>
<tr>
<td>lorem3</td>
<td>ipsum3</td>
</tr>
<tr>
<td>lorem4</td>
<td>ipsum4</td>
</tr>
</tbody>
</table>
</div>
<button> show classes list </button>

Inner text using javascript / jquery

I have a datatable and I want to extract the column 1
var usernames = dataTableTeamMembers.columns(1).data();
But it gives me an array like this:
Array(2)
0
:
"admin"
1
:
"catalao"
I only want the text, not the html.
How do I extract the innertext of that a tag?

There's two approaches:
With .column() (with each one):
$(document).ready(function() {
var dataTableTeamMembers = $('#example').DataTable();
dataTableTeamMembers.column(1).data().each(function(username, index){
console.log(username);
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger</td>
</tr>
<tr>
<td>2</td>
<td>Garrett</td>
</tr>
<tr>
<td>3</td>
<td>Tiger</td>
</tr>
<tr>
<td>4</td>
<td>Ashton</td>
</tr>
<tr>
<td>5</td>
<td>Garrett</td>
</tr>
</tbody>
</table>
And .columns() (returns array):
$(document).ready(function() {
var dataTableTeamMembers = $('#example').DataTable();
console.log(dataTableTeamMembers.columns(1).data()[0]);
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger</td>
</tr>
<tr>
<td>2</td>
<td>Garrett</td>
</tr>
<tr>
<td>3</td>
<td>Tiger</td>
</tr>
<tr>
<td>4</td>
<td>Ashton</td>
</tr>
<tr>
<td>5</td>
<td>Garrett</td>
</tr>
</tbody>
</table>

You have 3 options, depending on what you need
1 using DataTables API
var table = $('#your_table_id').DataTable().data();
for(var i = 0; i < table.length; i++)
{
var tbl_obj = table[i];
//do stuff
console.log(JSON.stringify(table[i]))
}
2 Using jquery to get all row html
$('#your_table_id tr').each(function() {
console.log($(this).html());
});
3 to get a specific cell on a row, by cell class
$('#your_table_id tr').each(function() {
var obj = $(this).find(".cell_class").html();
});
Use the one which fits more to your needs.

How to replace a text with row count with javascript

i have a dynamic table . that i'd add number for each tr. how can i replace the hello text with count of each tr with javascript?
here is my snippet of table:
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>
</body>
</html>

you should be using <td> instead of <th> after the header row.
$('tr').each(function(index, row){
$(row).children('td').first().text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Here is the solution for your problem -
var table = document.querySelector("#myTable");
var rows = table.querySelectorAll("tr");
let index = 0;
for( let row of rows){
for( let col of row.querySelectorAll("th")){
if( col.textContent == 'Hello'){
col.textContent = index;
}
}
index++;
}
<table border="1" id="myTable">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>

You need to get all the <tr> elements within the table. Then loop through the <tr>s and starting with the second one, replace its first child's text with the index of the current <tr>.
let tableRows = document.querySelectorAll("tr")
tableRows.forEach((tr, index) => {
if(index === 0) {
//Do nothing bc you don't want to remove the text in the first table row
} else {
let firstChild = tr.children[0]
firstChild.innerText = index
}
})

You can use find("td:first") to get the numbers that would replace "Hello". Also, since its a table, you need to use td. th are used for headers:
$('tr').each(function(index, row) {
$(row).find("td:first").text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Getting values of selected table rows in bootstrap using jquery

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

Getting this error - Unable to get property 'mData' of undefined or null reference

I am getting the below error when I use the jQuery data table.
Error: Unable to get property 'mData' of undefined or null reference
Code
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#empTable').DataTable();
} );
</script>
<table id="empTable" class="display" width="100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>AAAAA</td>
<td>32</td>
<td>Colombo</td>
</tr>
<tr>
<td>BBBBB</td>
<td>29</td>
<td>Kandy</td>
</tr>
</table>
Please suggest me how to fix this issue?

Your html structure is not proper, you need to have a thead element where the header is specified and the content should be in tbody.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>

HTML structures in the table needs to match.
For instance, <th> tags in your <thead> with the <tr>'s in the <tbody>. That is, if in the table you expect 5 columns , there should be 5 <th> tags in the table head and 5 <tr> tags in the table body.

$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>