I have two table rows (not in the same table) and I've been trying to set width of each table cell (td) in row1 = width of each table cell in row2, but it turns out every time row1 was a little shorter than row2, when I used alert to check respective values of all table cells , I got an ok result, then I inspected the two elements using firebug, and it turns out that for example, on setting a table cell value as 53px, the computed value was 53.2167px, while computed width of other respective table cell in row1 was only 53px , I guess thats all what's making the difference. is there any way to get that exact value (53.2167px) using jQuery ?
Do this in your environment should do the trick of setting correct widths to the headers tablecells vs the contents.
Example
HTML
<table id="theHeader">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
</table>
<table id="theContent">
<tbody>
<tr>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
<td>Testing</td>
</tr>
</tbody>
</table>
jQuery
var headerColumns = $('#theHeader thead tr:first-child th');
var contentColumns = $('#theContent tbody tr:first-child td');
for(i=0; i<contentColumns.length; i++){
$(headerColumns[i]).css('width',$(contentColumns[i]).width()+'px');
}
jsFiddle
http://jsfiddle.net/xWbhM/
Related
I am creating html table and getting table values using JavaScript.
How to get table header titles?
Date CAIFI
Jun-14 2.217
Jun-15 2.154
Jun-16 1.556
This is my table.
I wrote the code
var value = $("#whatifanalysisTable tbody tr:nth-child(1)").find("td:eq(1)").text();
alert(value);
getting value 2.217
but how to get table name with "Date" and "CAIFI"?
I added your version and changed version in snipped which is also mentioned by Rory in comments. Hope its helpfull.
tbody to thead
td to th
var value = $("#whatifanalysisTable tbody tr:nth-child(1)").find("td:eq(1)").text();
console.log(value);
var headerValue = $("#whatifanalysisTable thead tr:nth-child(1)").find("th:eq(1)").text();
console.log(headerValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tg" id="whatifanalysisTable">
<thead>
<tr>
<th class="tg-0lax">DATE</th>
<th class="tg-0lax">CAIFI</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Jun - 14</td>
<td class="tg-0lax">2.217</td>
</tr>
</tbody>
</table>
I have below script in my html page,
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
Its working fine in IE8. But when I use IE11, it is not returning exact row. instead it is just returning "0". But actual row size is "1".
What is the code needs to be replace to make it work.
The easiest thing to do, given a reference to the table element is to use querySelectorAll to find the tr within the tbody:
window.onload = function(){
var table = document.getElementById("tbl");
console.log(table.querySelectorAll("tbody tr").length);
}
<table id="tbl">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
</table>
I'd like to use this code to select a particular row
var table = document.getElementById("mytable");
table.rows[0].cells[3].innerHTML = 'here';
and instead of entering the row number I want to put a variable holding a number inside so I can locate a specific row.
The number of rows on the table can change.
Is there any other way to do this?
var table = document.getElementById("mytable");
table.rows[0].cells[3].innerHTML = 'here';
<table id="mytable" border="2">
<tr>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
</tr>
</table>
Is there an easy way to get all the table rows from a table without using a loop.
I thought that this would work but it only alerts the first row.
http://jsfiddle.net/THPWy/
$(document).ready(function () {
var O = $('#mainTable').find('tr');
//var O = $('#mainTable tr');
alert(O.html());
//alerts <th>Month</th><th>Savings</th>
});
<table id ="mainTable" border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>March</td>
<td>$50</td>
</tr>
<tr>
<td>a</td>
<td>$50</td>
</tr>
<tr>
<td>m</td>
<td>$50</td>
</tr>
<tr>
<td>j</td>
<td>$50</td>
</tr>
<tr>
<td>july</td>
<td>$50</td>
</tr>
<tr>
<td>aug</td>
<td>$50</td>
</tr>
<tr>
<td>sep</td>
<td>$50</td>
</tr>
</table>
Whatever you use will be iterating through each row to get the inner HTML out of it. So no, you cannot do it without a loop.
Here is an alternate method that gets the message in one line if that's what you're after, it's slightly less efficient than going with a loop though as it needs to make a new array.
jsFiddle
$(document).ready(function () {
var rows = $('#mainTable tr');
var message = $.map(rows, function (v) {
return v.innerHTML;
}).join('\n');
alert(message);
});
I would recommend just doing it in a regular loop.
FYI .html() only alerts the first row because that's what it was designed to do as that is what would be most useful.
Description: Get the HTML contents of the first element in the set of matched elements.
What about:
// get all tr (excluding the caption)
var O = $('table#mainTable').children().slice(1);
http://jsfiddle.net/THPWy/7/
What you have in your code already retrieves all table rows as an array of jQuery elements:
var trs = $('#mainTable').find('tr');
If you want to print the html contents of each row then you would have to use a loop:
trs.each(function (index, element) {
alert($(this).html());
});
You can get by using
gt(), lt(),eq()
.gt(index) // will get all the rows greater than specified index
.lt(index) // will get all the rows less than specified index
.eq(index) // will get all the rows equal to specified index
For Example
$('#mainTable tr').eq(1) will give second row
But when you want to know all the table rows data then go with Konstantin D - Infragistics solution
I have table that is filled with dynamic content from a query from a database on the backend. I want to hide any tr that contains only zeros.
Here is what my table looks like:
<table id="table1" " cellspacing="0" style="width: 800px">
<thead id="tablehead">
</thead>
<tbody id="tabledata">
<tr class="odd">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0.00%</td>
<td>0.00%</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$0.00</td>
</tr>
</tbody>
Now if the first three td's in tbody are == 0 then I would like to add a class to the tr that will effectively hide that row. How would I go about doing this using jQuery?
EDIT:
Sorry forgot to add what I have tried. The following is a test script I tried to see if I could collect all the td's
$(document).ready(function() {
$("#table1 td").filter(function() {
return $(this).text == 0;
}).css("text-color", "red");
});
You can do this :
$('tr').each(function(){
var tr = $(this);
if (tr.find('td:eq(0)').text()=="0"
&& tr.find('td:eq(1)').text()=="0"
&& tr.find('td:eq(2)').text()=="0"
) tr.addClass('hidden');
});
Demonstration (the hidden class changes the color to red, it's clearer...)
Depending on your need, you might have to trim the texts, or to parse them.
For more complex tests, you might find useful to work directly with an array of the cell contents. You can get it using
var celltexts = tr.find('td').map(function(){return $(this).text()}).toArray();