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
Related
I have a table with several <tr>s and each one has several <td>s. The content of these columns can be another html element (for example a textbox) or just text.
My question: how I can get the rest of the siblings of one clicked element inside this column? I mean, how I can know to which <tr> this element belongs, to <tr> #3 or <tr> #5?I don't have a index per <tr> to control
Example:
If I click the textbox of column #1 in row #5, I want that the content of column #2 in row #5 change. I don't know how to do it because my <tr> doesn't have an index.
Using jQuery, add this to the event handler. This will provide you with a collection of table cells:
var columns = $(this).closest('tr').children();
// .eq() is 0-based, so this would retrieve the fourth column
columns.eq(3);
You can find the index of a row using the index() function.
$('input').click(function(){
var index = $(this).parents('tr').index();
alert('you click an input on row #' + index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td><input type="text"></td>
<td></td>
</tr>
</table>
Use closest to get the parent TR element.
$('your_element').click(function(){
var tr = $(this).closest('tr');
var element1 = $(tr).find('element_to_find');
});
You can also use the :eq operator to find the td.
$('your_element').click(function() {
var tr = $(this).closest('tr');
var col3 = $("td:eq(2)", tr);
}
With jquery I am reading table:
$('#lc_searchresult > table > tbody > tr').each(function() {
var data = $(this).find("td:eq(5)").html();
alert(data);
});
it is working fine if TR tag has one TD inside like:
<tr>
<td>654321</td>
</tr>
but If I am having two TD's then I am geting just first one:
<tr>
<td>654321</td>
<td>13456</td>
</tr>
How can I get all of TD's from TR with $(this).find("td:eq(5)").html()
$('#lc_searchresult > table > tbody > tr').each(function() {
$(this).children('td').each(function(){
var data = $(this).html();
alert(data);
})
});
Why eq it? You're using .each() which means you will return an array of <tr>'s.
$('#lc_searchresult > table > tbody > tr').each(function() {
var data = $(this).find('td').text();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lc_searchresult">
<table>
<tbody>
<tr>
<td>654321</td>
<td>13456</td>
</tr>
<tr>
<td>4353535</td>
<td>3453553</td>
</tr>
</tbody>
</table>
</div>
JSFiddle.
this should work,
**note thier is no need to use :eq selector here,
READ ABOUT JQUERY :eq selector
$('#lc_searchresult > table > tbody > tr').each(function() {
var data = $(this).html();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='lc_searchresult'>
<table>
<tr>
<td>654321</td>
<td>13456</td>
</tr>
</table>
</div>
td:eq(5) : mean you get data of TD with exactly index. so you can't get all data of TR with eq().
well when you write
var data = $(this).find("td");
the variable data contains an array of all the td's not just the first one
if you say
data.each(function(){
alert($(this).html())
})
you will get all the td's
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.
This is the HTML:
<table id="tblTestAttributes">
<thead>
<tr> <th>Head 1</th> <th>Head 2</th> </tr>
</thead>
<tbody>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
<tr> <td id="txtDesc">Item 1</td> <td id="ddlFreq">Assume a DropDownList Here</td> </tr>
</tbody>
</table>
This is the javascript to get the values of each row:
var frequencies = [];
if ($('#tblTestAttributes').length) {
$('#tblTestAttributes tr').each(function () {
var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
alert(t);
frequencies.push(t);
});
}
I want to avoid the first row, which contains th elements which are just display headers and don't contain any data.
So I changed the selector to this:
#tblTestAttributes tr:not(:first-child)
This is skipping the second tr as well. What is happening here?
Simple you can use below code
$('#tblTestAttributes tr:not(:has(th))').each(function () {
In terms of performance, using .find() will be better than resolving the selector with Sizzle.
$('#tblTestAttributes').find('tbody').find('tr').each(function () { ... });
Here's the jsPerf to show it.
use
#tblTestAttributes tr:gt(0)
or
#tblTestAttributes tbody tr
I would recommend the 2nd, because it may take advantage of querySelectorAll and should be the fastes solution.
your approach didn't work as expected, because the 2nd tr is also a first-child(of tbody)
Use tr + tr selector, which gets all tr that appear after another tr, so the first one is skipped.
Also no need to check if table exists, as in that case $.each wouldn't even get executed.
var frequencies = [];
$('#tblTestAttributes tr + tr').each(function () {
var t = $(this).find('td[id^="txtDesc"]').text() + ";" + $(this).find('[id^="ddlFreq"] option:selected').val();
alert(t);
frequencies.push(t);
});
After your edit:
Simply select only all tr inside tbody:
$('#tblTestAttributes tbody tr').each(function(){
...
}
It happens because the second row is, in fact, the first child of the tbody just like the first row is the first child of the thead.
To only take the elements you need, I'd suggest something nearer from your need :
#tblTestAttributes tr:has(td)
Don't forget to get rid of those duplicate txtDesc id, this is illegal in HTML, use a class instead.
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".