I am trying to get header text in array, however with following I am getting value plus th tag i.e [<th>value1</th>, <th>value2</th>], I want to get [value1, value2].
$('#header').children().each(function(){this.html});
Here is how my HTML looks like:
<tr bgcolor="#cdb79e" id="header">
<th>Origin Code</th>
<th>Description</th>
<th>Notes</th>
<th>Domain</th>
<th>Tier</th>
<th>Engine</th>
<th>Network</th>
<th>Platform</th>
<th>Expansion Tool</th>
<th>Date</th>
<th>Imps</th>
<th>Clicks</th>
<th>Engine CTR</th>
<th>Average Position</th>
<th>Picks</th>
<th>LP CTR</th>
<th>GSL Picks</th>
<th>GSL LP CTR</th>
<th>Merchant Picks</th>
<th>Merchant LP CTR</th>
<th>CPC</th>
<th>RPC</th>
<th>RPP</th>
<th>Cost</th>
<th>Total Rev</th>
<th>Margin</th>
<th>ROI</th>
</tr>
Assuming your HTML were to look something like this:
<table>
<thead>
<tr id='header'>
<th>Value1</th>
<th>Value2</th>
</tr>
</thead>
</table>
You could use something like this to build an array of the <th> elements' text:
var headerArray = [];
$('#header').children().each(function(){
headerArray.push($(this).text());
});
console.log(headerArray);
Related
When I try to add elements to my dom, they're not added, but when I console.log them, I do get a value <th class="text-right" rowspan="1" colspan="1"></th>
for(c=0; c<2; c++) {
console.log(document.getElementById('achats_table').tFoot.children[0].appendChild(document.createElement('th')));
document.getElementById('achats_table').tFoot.children[0].appendChild(document.createElement('th'));
}
Table HTML :
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
</tr>
</tfoot>
</table>
what am I doing wrong? how can I debug this? I get no console errors.
It looks like you want to add th elements to a currently blank tfoot? You could try this:
for(c=0; c<2; c++) {
document.querySelector('#achats_table tfoot').appendChild(document.createElement('th'));
}
I have a treegrid that is build like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr class="treegrid-0">
<th>name2</th>
<th>type2</th>
<th>Number2</th>
</tr>
<tr class="treegrid-1">
<th>name1</th>
<th>type1</th>
<th>Number1</th>
</tr>
<tr class="treegrid-2 treegrid-parent-1" style="display:none;">
<th>name1-A</th>
<th>type1-A</th>
<th>Number1-A</th>
</tr>
<tr class="treegrid-3 treegrid-parent-1" style="display:none;">
<th>name1-B</th>
<th>type1-B</th>
<th>Number1-B</th>
</tr>
<tr class="treegrid-4">
<th>name0</th>
<th>type0</th>
<th>Number0</th>
</tr>
</tbody>
</table>
I would like to add the sorting option when i click on a column.
The sorting option has to be done only on the top parent.
It's a treegrid, so the expected behaviour is that the child nodes has to be moved also with the parent if the parent has to move.
How can i do that with JS ?
instead of doing all the hard work yourself, you can use the awesome js/jQuery library: datatables: https://datatables.net/
Just after defining your table, give it an ID
<table id = "myTable">..</table>
and then add the following snippet which will transform your table into an awesome table.
$(document).ready(function(){
$('#myTable').DataTable();
});
Cheers!
I have a below table code. I would like to get the table row value which has class as"highlight", below is the code which i tried but i am getting null. Please someone help.
table name = itemtable; table rows will be loaded dynamically using jquery.
<table cellspacing="0" cellpadding="0" id="itemtable" class="t1" border="1px">
<thead>
<tr>
<th> SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody></tbody>
</table>
using below code to highlight the row using class ".highlight" when user db click on itemtable row.
$(document).on("dblclick", "#itemtable tr", function (e) {
//high light the table row
$('#itemtable tr').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
});
now i am trying to get one of the value say first , which has class as highlight( ie row which is selected) in another flow of program (after highlight).
var selectedrow = $('#itemtable tr.highlight');
var slno = $(this).closest("tr").find('td:eq(2)').text();
Like this?
var selectedRow = $('#itemtable tr.highlight');
var slno = selectedRow.find('td:eq(2)').text();
Below code is working.
var selectedrow = $('.highlight');
var slno = selectedrow.closest("tr").find('td:eq(0)').text();
It totally depends on the ajax response. It would be better if you had share the ajax code. Though try with below code:
<table id="itemtable">
<thead>
<tr>
<th>SLno</th>
<th>Item code</th>
<th>Item name</th>
<th>Received qty</th>
<th>Insp Date</th>
<th>Accepted qty</th>
<th>Rejected qty</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
...Your ajax response will append here...
</tbody>
</table>
JQuery Code:
$(document).ready(function(){
setTimeout(function(){
$('table#itemtable').find('tr.highlight').each(function(i, v){
$(v).find('td').each(function(v1){
console.log($(this).text());
});
});
}, 4000);
});
Let me know if it works for you. I have added a fiddle.
I am trying to create a responsive table, that collapses from a horizontal to a vertical layout. For that I use a :before pseudo-element, that gets its value from a data attribute. Consider the following dom-structure:
td:before {
content: attr(data-th);
}
<table>
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="First">Alpha</td>
<td data-th="Second">Beta</td>
<td data-th="Third">Gamma</td>
<td data-th="Fourth">AnotherGreekLetter</td>
</tr>
</tbody>
</table>
This works fine and well, until you realize, that you have to write every single data-attribute by hand, since every new row of data requires the data-attribute.
Ideally I would like to have something like this:
td:before:nth-of-type(4n+1) {
content: attr(data-th:nth-of-type(4n+1));
}
td:before:nth-of-type(4n+2) {
content: attr(data-th:nth-of-type(4n+2));
}
<table>
<thead>
<tr>
<th data-th="First">First</th>
<th data-th="Second">Second</th>
<th data-th="Third">Third</th>
<th data-th="Fourth">Fourth</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alpha</td>
<td>Beta</td>
<td>Gamma</td>
<td>AnotherGreekLetter</td>
</tr>
</tbody>
</table>
where I am referencing the data-attribute of the th-nodes.
Now, as far as I know, there is no way of walking the dom-tree with just css, so I assume this would only be possible with javascript. Yet, I have never made use of the data-attribute, so I am hoping that I am wrong about that.
Can I make this work with (in descending order of preference): only css, php, javascript?
Don't think you can do this via CSS, you could probably use a slightly different approach if using jQuery too as you could use an ID to locate the values from the header and write it out to the body e.g.
<table>
<thead>
<tr data-id="1">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr data-id="1"></tr>
</tbody>
</table>
And the jQuery:
$(document).ready(function() {
$("thead tr th").each(function( index ) {
$("tbody tr[data-id='" + $(this).parent().attr('data-id') + "']").append('<td>' + $(this).text() + '</td>');
});
});
http://codepen.io/anon/pen/kXdkyY
Hopefully this gives you an alternative idea of how you could loop through and grab data in a different way.
so, I am using datatables along with jQuery, and am a bit stumped as to why this is not working. My HTML looks like this:
<table id="surnamePrimaryPartitionTable" border=1 class="display partitionDisplay">
<caption>Partitions</caption>
<thead>
<tr style="background-color: #afeeee;">
<th>Partition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have several tables, each of which follows a similar format, and each of which uses the partitionDisplay class (really just a class that I use so that I can select all the tables later using jQuery).
So, the problem arises when I try to destroy the datatables. Here is what I have:
function DeletePartitionInformation(data) {
jQuery(".partitionDisplay").each(function(){
jQuery(this).dataTable().fnDestroy();
});
jQuery("table tbody").each(function() {
jQuery(this).html("");
})
}
This code seems to work correctly for the first table, but throws an exception and doesn't work on any subsequent tables. The javascript error message I am getting is the following:
Uncaught TypeError: Cannot read property 'asSorting' of undefined
A quick Google search on this error says that it generally arises from having elements nested in a tag. This does not appear to be the problem, however. I will post the code for the other three tables to demonstrate this:
<table id="surnamePrimarySubpartitionTable" border=1 class="display partitionDisplay">
<caption>SubPartitions</caption>
<thead>
<tr style="background-color: #afeeee;">
<th>Partition</th>
<th>SubPartition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
<th>Begin</th>
<th>End</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="givenNullSurnamePartitionTable" border=1 class="display partitionDisplay">
<caption>Partitions</caption>
<thead>
<tr style="background-color: #98fb98;">
<th>Partition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="givenNullSurnameSubpartitionTable" border=1 class="display partitionDisplay">
<caption>SubPartitions</caption>
<thead>
<tr style="background-color: #98fb98;">
<th>Partition</th>
<th>SubPartition</th>
<th>CPU %</th>
<th>Search Count</th>
<th>Person Count</th>
<th>Disk Space</th>
<th>Begin</th>
<th>End</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
One final note: I am actually able to get the behavior I want if I use the below code. Obviously I would prefer not to, however, since I'd really like to loop over the elements rather than hard-code the element id's in.
function DeletePartitionInformation(data) {
jQuery("#surnamePrimarySubpartitionTable").dataTable().fnDestroy();
jQuery("#surnamePrimaryPartitionTable").dataTable().fnDestroy();
jQuery("#givenNullSurnameSubpartitionTable").dataTable().fnDestroy();
jQuery("#givenNullSurnamePartitionTable").dataTable().fnDestroy();
jQuery("table tbody").each(function() {
jQuery(this).html("");
})
}
Uncaught TypeError: Cannot read property 'asSorting' of undefined
This seems to suggest it may be trying to destroy dataTables that weren't created.
The static fnTables should give you an Array of only the <table> elements with a dataTable:
var tables = $.fn.dataTable.fnTables(true);
$(tables).each(function () {
$(this).dataTable().fnDestroy();
});