Develop Reference

Iterating through table rows (tr) and selecting rows without a specific class in JQuery

What I am trying to do is, to be able to select rows which do not have a specific class name, and push them into a new array. I know that there is :not() Selector and .not() method to help me with this.
But the big problem is that I can't use :not() Selector with $(this) and tried using .not() method but couldn't get anywhere.
Here is my code:
$(document).ready(function(){
$('#getRows').on('click', function() {
var temp = new Array();
$('#tbl tr').each(function(){
var clsFree = $(this).not(document.getElementsByClassName("testCls"));
temp.push(clsFree);
});
console.log(temp.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="getRows">Get rows without class</button>
<table id="tbl">
<tr class="testCls"><td>Test1</td></tr>
<tr class="testCls"><td>Test2</td></tr>
<tr><td>Test3</td></tr>
<tr class="testCls"><td>Test4</td></tr>
<tr class="testCls"><td>Test5</td></tr>
<tr class="testCls"><td>Test6</td></tr>
<tr><td>Test7</td></tr>
<tr class="testCls"><td>Test8</td></tr>
<tr class="testCls"><td>Test9</td></tr>
</table>
Please note that the main goal here is to find rows that don't have a class name with testCls and push them into a new array. Any other method is also appreciated.

Try :not() as part of the selector in .each iterator to iterate over only with the selected rows in the selector:
$('#tbl tr:not(.testCls)').each(function(){
Working Code Snippet:
$(document).ready(function(){
$('#getRows').on('click', function() {
var temp = new Array();
$('#tbl tr:not(.testCls)').each(function(){
var clsFree = this;
temp.push(clsFree);
});
console.log(temp.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="getRows">Get rows without class</button>
<table id="tbl">
<tr class="testCls"><td>Test1</td></tr>
<tr class="testCls"><td>Test2</td></tr>
<tr><td>Test3</td></tr>
<tr class="testCls"><td>Test4</td></tr>
<tr class="testCls"><td>Test5</td></tr>
<tr class="testCls"><td>Test6</td></tr>
<tr><td>Test7</td></tr>
<tr class="testCls"><td>Test8</td></tr>
<tr class="testCls"><td>Test9</td></tr>
</table>

two things:
this is the syntax for the .not: $(this).not('.testCls');
clsFree is going to be a jQuery, and jQuerys still exist even if there are no elements in them. You have to check the length to see if there are any elements.
also as an aside, you might end up being happier with something like this:
$('#tbl tr:not(.testCls)').each...
$(document).ready(function() {
$('#getRows').on('click', function() {
var temp = new Array();
$('#tbl tr').each(function() {
clsFree = $(this).not('.testCls');
if (clsFree.length > 0)
temp.push(clsFree);
});
console.log(temp.length);
});
console.log('other method', $('#tbl tr:not(.testCls)').length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="getRows">Get rows without class</button>
<table id="tbl">
<tr class="testCls"><td>Test1</td></tr>
<tr class="testCls"><td>Test2</td></tr>
<tr><td>Test3</td></tr>
<tr class="testCls"><td>Test4</td></tr>
<tr class="testCls"><td>Test5</td></tr>
<tr class="testCls"><td>Test6</td></tr>
<tr><td>Test7</td></tr>
<tr class="testCls"><td>Test8</td></tr>
<tr class="testCls"<td>Test9</tr></tr>
</table>

JS: how to get tbody index in table

I have a table with many tbodies inside. For example:
<table id="tableId">
<tbody id="tbodyId">
<tr><td>1</td></tr>
</tbody>
<tbody>
<tr><td>2</td></tr>
</tbody>
<tbody>
<tr><td>3</td></tr>
</tbody>
</table>
I need these tbody for grouping rows with span. How can I get certain tbody index in table via js? I mean:
var tbody=....;
var table=....;
var tbodyIndex=?
For example, for rows we can use rowIndex, but for tbodies?
EDIT
Special edit for some users:
var tbody=document.getElementById("tbodyId");
var table=document.getElementById("tableId");
var tbodyIndex=?

You could use:
var tbody=document.getElementById("tbodyId");
var table=document.getElementById("tableId");
var tbodyIndex= [].slice.call(table.tBodies).indexOf(tbody); // [].slice.call() to convert HTML collection to array
-DEMO-

Data from array to each td cell iof table

I have table and want to past data from array to each cell. Only one data to one cell.
<table style="border: 1px solid #333">
<tr>
<th>#1</th>
<th>#2</th>
<th>#3</th>
<th>#4</th>
<th>#5</th>
<th>#6</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I try js which do not work:
$(document).ready(function(){
var pole = [11,22,31,4,5,6];
$.each(pole, function(i, val){
$('table td').html(pole[i]);
}
});
Can ask help? Thanks

You need to use correct selector to target tds in each iteration. use .eq() selector along with index property of each iteartion to do that:
var pole = [11,22,31,4,5,6];
$.each(pole, function(i, val){
$('table td').eq(i).html(val);
});
Working Demo

Use this for current object
var pole = [11,22,31,4,5,6];
$("table tr td").each(function(i, val){
$(this).html(pole[i]);
});
DEMO

Try this:
Example
$(document).ready(function(){
var pole = [11,22,31,4,5,6];
$.each(pole, function(i, val){
$('table td').eq(i).html(pole[i]);
});
});

In javascript get the element by its id then replace innerHTML by the the td tags and the values that you want.

How to get the content of a table rows and columns

Can anyone give me an idea on how I will count the table column and table row and get the id, attribute and the content of a each cell (the cell is contenteditable). What tools do I have to use?
e.g.
<table>
<tbody>
<tr>
<td id='1A' rowspan=2>Rowspan 2</td>
<td id='1B'>22222</td>
<td id='1C'>33333</td>
</tr>
<tr>
<td id='2B' colspan='2'> Colspan2</td>
</tr>
<tr>
<td id='3A' style='color:red'>Whaterver</td>
<td id='3B' style='font-weight:bold'>Askyourmother</td>
<td id='3C'>sigh</td>
</tr>
</tbody>
</table>
I'm using Jquery (Javascript).

You can make use of jQuery to get it and then do whatever you want with it.
In this case I just print it in the console.
//for each TR...
$('table tr').each(function(){
//for each TD....
$(this).find('td').each(function(){
console.log($(this).text()); //do whatever you want with the text
console.log($(this).attr('id'));
console.log($(this).attr('any_other_attribute'));
});
});

you can use jQuery.
To get all tr use it as below.
var count = $('table tr').length;
above will out put count of all the tr inside table.
To get the ID attribut of DOM use .attr()
var tableID = $('table').attr('id');
above will out-put the ID attribute of the DOM.
To get the text inside of DOM use .text() or .html()
var text = $('table tr td').text();
var html = $('table tr td').html();
above will out-put the HTML or TEXT inside of the selected DOM.

use length to count tr and each to get ids and contents.
var table=$('table tr');
var trCount= table.length; //count tr
alert('trcount='+trCount);
$('table tr td').each(function(){
var tdID=$(this).attr('id'); //get id
var tdcontent=$(this).text(); //get content
alert('id='+tdID);
alert('content='+tdcontent);
}) ;
fiddle here

jQuery each loop in table row [duplicate]

This question already has answers here:
How to iterate a table rows with JQuery and access some cell values?
(3 answers)
Closed 3 years ago.
I am having something like:
<table id="tblOne">
<tbody>
<tr>
<td>
<table id="tblTwo">
<tbody>
<tr>
<td>
Items
</td>
</tr>
<tr>
<td>
Prod
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
Item 2
</td>
</tr>
</tbody>
</table>
I have written jQuery to loop through each tr like:
$('#tblOne tr').each(function() {...code...});
But problem is that it loops through the "tr" of "tblTwo" also which I don't want.
Can anyone please suggest something to solve this?

In jQuery just use:
$('#tblOne > tbody > tr').each(function() {...code...});
Using the children selector (>) you will walk over all the children (and not all descendents), example with three rows:
$('table > tbody > tr').each(function(index, tr) {
console.log(index);
console.log(tr);
});
Result:
0
<tr>
1
<tr>
2
<tr>
In VanillaJS you can use document.querySelectorAll() and walk over the rows using forEach()
[].forEach.call(document.querySelectorAll('#tblOne > tbody > tr'), function(index, tr) {
/* console.log(index); */
/* console.log(tr); */
});

Just a recommendation:
I'd recommend using the DOM table implementation, it's very straight forward and easy to use, you really don't need jQuery for this task.
var table = document.getElementById('tblOne');
var rowLength = table.rows.length;
for(var i=0; i<rowLength; i+=1){
var row = table.rows[i];
//your code goes here, looping over every row.
//cells are accessed as easy
var cellLength = row.cells.length;
for(var y=0; y<cellLength; y+=1){
var cell = row.cells[y];
//do something with every cell here
}
}

Use immediate children selector >:
$('#tblOne > tbody > tr')
Description: Selects all direct child elements specified by "child" of
elements specified by "parent".