How to get all rows from the table except header row? - javascript

I have table created dynamically in JavaScript.
I have this table:
Here the way how I get rows from the table above:
var trows = table.rows;
This way I get all the rows from the table above including the header row.
My question is there any way to get all rows from the table except header row?

Put all those rows inside <tbody> and put the header inside <thead> Then do
var trows = document.getElementById('tableid').getElementsByTagName('tbody')[0].rows;

before answering your, i would like to suggest to construct the table structure as given below so that you can get result what you exactly needed.
<table>
<thead>
<tr>
<th>heading</th>
</tr>
</thead>
<tbody id="tableid">
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</tbody>
</table>
And then in your script,now you can get the result as follow
var trows = table.rows;
i hope you might be satisfied with this answer, if not post a question without any hesitation. thank you

Remove first value of an array with .shift
trows.shift(); // remove first line

Related

Html/JS: Link cell values of one column of one table from cells of another column of another table

I am new to coding and am trying to make a table using values from another table.
For example, the following table has a column for "Contact" (names)
<table>
<tr>
<th>Role</th>
<th>Contact</th>
<th>Email</th>
</tr>
<tr>
<td>Role1</td>
<td>Person1 </td>
<td>Person1#xyz.com</td>
</tr>
<tr>
<td>Role2</td>
<td>Person2</td>
<td>Person2#xyz.com</td>
</tr>
</table>
My second table (ttask) has a list of tasks and has a column for the "Contact" assigned to a task. I would like to link the value for the Contact cells in the following table with its corresponding Contact in the 1st table so that if I change the Contact's name in the 1st table, it will update in all the Table ttask cells involving that Contact's name. How can I make this happen?
<table id="ttask">
<tr>
<th>Weeks Prior</th>
<th>Role</th>
<th>Contact</th>
<th>Task</th>
</tr>
<tr>
<td>16</td>
<td>AH</td>
<td>Person1</td>
<td>
What currently needs to be done. The task and what's involved blah blah
</td>
</tr>
</table>
Thank you so much!
first take different id for both table td and try this
$(document).ready(function(){
VAR abc = $(document.getElementById("tdidoffirsttable").innerHTML);
document.getElementById("td id of second table").innerHTML = abc;
});
The question is somewhat unclear because you didn't mention if you are willing to use html only or not. If you are willing to consider javascript, then this can work:
<p id="demo1">person1</p>
<p id="demo2">person2</p>
<script>
function myFunction() {
var str = document.getElementById("demo2").innerHTML;
document.getElementById("demo1").innerHTML = str;
}
myFunction();
</script>
Of course this is per row, if you data contains multiple lines then should be adapted by doing a loop in order to simplify.

Select and sort a column in a table using Javascript

I want to select a particular column of a table and sort it accordingly using Javascript (No frameworks or plugins). Could anyone help me regarding this?
<table>
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Data11</td>
<td>Data23</td>
<td>Data53</td>
<td>Data45</td>
</tr>
<tr>
<td>Data81</td>
<td>Data42</td>
<td>Data33</td>
<td>Data4854</td>
</tr>
<tr>
<td>Data84681</td>
<td>Data452</td>
<td>Data354</td>
<td>Data448</td>
</tr>
<tr>
<td>Data1846</td>
<td>Data25635</td>
<td>Data3232</td>
<td>Data44378</td>
</tr>
</tbody>
</table>
function sortTableByColumn(tableId,columnNumber) { // (string,integer)
var tableElement=document.getElementById(tableId);
[].slice.call(tableElement.tBodies[0].rows).sort(function(a, b) {
return (
a.cells[columnNumber-1].textContent<b.cells[columnNumber-1].textContent?-1:
a.cells[columnNumber-1].textContent>b.cells[columnNumber-1].textContent?1:
0);
}).forEach(function(val, index) {
tableElement.tBodies[0].appendChild(val);
});
}
In your page, add id to the table tag:
<table id="myTable">
From javascript, use:
sortTableByColumn("myTable",3);
tBodies[0] is used because there can be many. In your example there is only one.
If we have var arr=[123,456,789], [].slice.call(arr) returns a copy of arr.
We're feeding it the html-rows-collection, found in tBodies[0] of tableElement.
Then, we sort that array with an inline function that compares two array elements, here: rows (<tr>).
Using cells[columnNumber] we access the <td>s, and textContent to access the text content. I've used columnNumber-1 so you can enter 3 for third column instead of 2, because the index of first element of an array (column 1) is 0...
The forEach goes through the elements of the array, which is by now in order, and appendChild row to the tBody. Because it already exist, it just moves it to the end: moving the lowest value to the end, then moving the second lowest to the (new) end, until it ends with the highest value, at the end.
I hope this is what you want. If so, enjoy!
Try using datatables you can get it from http://datatables.net its reallt easy to use. depends on jQuery
$("table").dataTable();
boom! and its done.

DataTables: TypeError: i is undefined

I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.

JQuery update table cell and add new table rows

A newbie question,really.
Suppose I have a html table like this:
<div id="div1">
<table id="table1" border="1">
<tr>
<th bgcolor="#eee"><strong>ID</strong></th>
<th bgcolor="#eee"><strong>Price</strong></th>
</tr>
<tr>
<td id='id1'>1111</td>
<td id='id2'>2222</td>
</tr>
</table>
</div>
Now I am using Jquery to get data in json format from server, like this:
id1,19.99
id2,29.99
id3,39.00
What I want to achieve is: Look at the data, if the id already exist in table, update the cell value. If id doesn't exist in the table, add a new row. How do I do that in JQuery? I just started to learn JQuery. Now I can use ajax call to get the data, but don't know how to update the table. Any help is appreciated.
To see if a cell exists, you must test the .length of its selector:
$('#'+str).length; // zero if there is no such ID
Or you can just update the contents of that cell with .text(), which will fail if the ID doesn't exist:
$('#'+str).text(newvalue);
To create a new row, you can .append() it to the table:
$('table tr#id_of_row').append('<td id="'+str+'">'+newvalue+'</td>');
You can get a cell by id like this
$('#'+id).length //length will be 0 if not found or 1 if found
Update the value using
$('#'+id).text(new_value);

Remove table row that contains a table

I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.
How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/

Categories