I have a html page that has table with table heading.
I want to delete the table on load if it does not contain any rows on loading the document.Please mind that I do not want to click or any other things.
<table class="Example:">
<th>Range from 12.12 to 1.12</th></table>
<table class="Range:">
<th>Range from109.091to111.364</th> <tr><td>f88c6441-3a2f-4c63-8b00-f63a75c09d57</td>
<td class="number">110.000</td></tr>
</table>
I want to delete the first table and keep the second. Mind that there can be dynamic number of such tables
You are missing a tr element outside the th.
You can get the number of rows of the table and if bigger than 1 (first is the heading) hide the table.
Code:
var rowCount = document.getElementsByClassName('Example')[0].rows.length;
if (rowCount<=1){
document.getElementsByClassName('Example')[0].style.display = 'none';
}
Demo: http://jsfiddle.net/IrvinDominin/HLv9c/
Use jQuery :
$("table:not(:has(td))").remove();
Get all elements without child node in jQuery
Javascript :
var table = document.getElementsByTagName("table");
for (var i = 0, a = table[i]; i < table.length; i++, a = table[i]) {
if (a.getElementsByTagName("td").length === 0) {
a.parentElement.removeChild(a);
}
}
Demo : http://jsbin.com/vuzin/1/edit
With jquery:
<script>
$(document).ready(function(){
$('table').each(function(){
if($(this).find('td').length <= 0){
$(this).remove();
}
});
});
</script>
Related
I'm trying to create my own script for a mobile version of my tables on my website.
Im currently using the script below to get the size of the table, and create new tables for each row, duplicating the headers into each new table.... (see: http://api.jquerymobile.com/table-reflow/ ) to get an idea of what I'm trying to achieve.
My script is as follows, but their is a js fiddle included at the bottom for a better example.
My problem is that I am only able to create 1 inside each table, where it should really be 3 rows, inside of each table. Again check the fiddle below for a proper example. Can anyone see why it is only creating 1 row in the table?
<script>
$(document).ready(function(){
var TableSize = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var i = 1;
var TableRowCount = $("table tbody tr").size(); // Get # of body rows
$("table thead tr th").each(function(){
$(this).attr("id", i++); // Give headers incrementing ID
});
for ( var CreateTables = 1; CreateTables < TableRowCount; CreateTables++ ){ // Create new table class="mobile_table" for each row
$("table").after("<table class='mobile_table'></table>");
}
$("table.mobile_table").each(function(){// Insert original headers into each row of new table as first column
var h = 1;
while ( ++h < TableSize){ // this is where the error is, it gives me the stuff below but x3 (the number of created tables)......
$("table.mobile_table").after("<tr><td></td><td></td><td></td></tr>");
}
});
console.log(TableSize);
console.log(TableRowCount);
});
</script>
See the fiddle: http://jsfiddle.net/Yf7KV/
Do you mean like this: http://jsfiddle.net/Yf7KV/2/
JS
$(this).append("<tr><td class='mobile_col_1'>Col 1</td><td class='mobile_col_2'>Col 2</td></tr>");
Explanation: Append will alllow you to append elements one after the another. html replaces with what you currently have
I have a tabulated list of records - an HTML table.
Most rows have 3 columns but some may have just 1 or 2. In this case, I use colspan and stretch it across the other columns.
What I want to do:
When a user clicks a button on the page, I want to remove the last column (collapse), ONLY if it has more than one column.
How is this possible with jquery (if it can be done)?
try something like this
$('tr').each(function(){
$("td:last").hide()
})
You can do this, but you should also add a class to the table so that you can select the table you want by class.
if($('tr').length > 1) {
$('tr').each(function(){
$("td:last").hide()
})
}
If you add for example the class myTable, do:
if($('.myTable tr').length > 1) {
$('.myTable tr').each(function(){
$(".myTable tr td:last").hide()
})
}
try this
$('tr').each(function(){
$("td:last").hide();
})
I think you need to live the save number of columns (colspan) in the row before removing the latest column in order to make table responsive.
Wrote a little function. Not tried in action
<button onclick="removeLatestCol()"></button>
<script>
function removeLatestCol() {
var latest_row = $("table tr:last");
var cols = $("td", latest_row);
if (cols.length == 1) {
latest_row.remove();
return;
}
var latest_col = cols.filter(":last");
latest_col.prev().attr("colspan", (latest_col.prev().attr("colspan") || 1) + (latest_col.attr("colspan") || 1));
latest_col.remove()
}
</script>
I am trying to add an HTML block to a table(s) if more than 3 td elements are found, and not do anything if the table(s) have less than 3 td elements. I have looped through the tables, and have been able to check how many tds are in each table.
I have tried using .filter(); and $.each() but couldn't crack it.
So: >> How do I only add the HTML to the Tables that passed the if > 3 statement ?
I am still learning JavaScript and jQuery so please bear with me.
here is the code so far:
var tbls = $("body").find("table.responsive").length;
var data = Array();
for(var index = 0; index < tbls; index++){
$("table.responsive").each(function(i, v){
data[i] = Array();
$(this).find("td").each(function(ii, vv){
data[i][ii] = $(this).text();
});
})
}
data.forEach(function(item) {
if(item.length > 3) {
//here I want to add the HTML, but it is applied to all tables
$("table.responsive").before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
return false;
}
});
Here is a demo: http://jsfiddle.net/design4lifeblog/gSPXu/15/
You don't need to start traversing from body element and making an array for this, you can count the TDs in an each function.
$("table.responsive").each(function(){
if ( $('td', this).length > 3) {
$(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
}
})
$(function(){
$("table.responsive").each(function(){
if ( $(this).find('td').length > 3) {
$(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
//alert($(this))
}
})});
DEMO
$("table.responsive").each(function(){
if($(this).find('td').size() > 3)
$(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
})
http://jsfiddle.net/pKWXZ/1/
What I want to do, in short, is from $(this) being a table row, find the next table row with a class of "example" (not necessarily a sibling).
I.E. use next() to find the next row with a class of "example" which isn't a sibling.
HTML:
<table>
<tr><td>One</td></tr>
<tr class="current"><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr class="target"><td>Five</td></tr>
<tr><td>Six</td></tr>
</table>
JavaScript:
var current = $('.current').next();
while(current.size() && !current.hasClass('target')) {
current = current.next();
}
current.css('color', '#0f0');
OR
$('.current').nextAll('.target').last().css('color', '#0f0');
If you're building those <tr>s from strings, you could do something like that:
var x = '';
for(var i = 0; i < 3; i++) {
x += '<li>Test ' + i + '</li>';
}
$(x).appendTo('#test');
So instead of inserting the table rows one by one, put them together as one string, make a jQuery object from that string and attach that to your table.
This also helps you with performance, since you edit the DOM only once.
If I have a div res which contains N table elements with Y div's with id eye-d inside of them..
How would I iterate over these for each table getting the eye-d.innerHTML's?
NOTE: eye-d is unique. There is many tables in the 1 eye-d.
Example of eye-d
<div id="eye-d">
<table border="0" cellpadding="2" cellspacing="1" class="list">
<tbody>
<tr class="table_text">…</tr>
<tr>
<td class="odd">…</td>
<td class="odd">ABC</td>
<td class="odd">N/A</td>
</tr>
</tbody>
</table>
</div>
As requested.. rephrased...
I have 1 div with an id eye-d then I have many tables... each of these tables have many div's with class odd. I want the .innerHTML's of the odd's for each table inside eye-d.
Your id's are not unique.
You cannot have more than one <div> with an id of "eye-d".
Id's have to be unique whilst the name property does not have to be unique. You may want to use classes instead.
<div class="eye-d"> ... </div>
[[Edit]]
The selector for those div's is as simple as $("#eye-d table .odd") (uses jQuery )
If you must use raw JS then you can :
var div = document.getElementById("eye-d");
var tables = [];
recurse(res.childNodes, function(el) {
if (el.nodeName.toLowerCase() === "table") {
tables.push(el);
}
});
// array of innerHTML of odd divs.
var oddDivs = [];
for (var i = 0, ii = tables.length; i < ii; i++) {
recurse(tables[i].childNodes, function(el) {
if (el.className.indexOf("odd") > 0) {
oddDivs.push(el.innerHTML);
}
});
}
function recurse(nodeList, do) {
for (var i = 0, ii = nodeList.length; i < ii; i++) {
do(nodeList[i]);
if (nodeList[i].childNodes.length > 0) {
recurse(nodeList[i].childNodes, do);
}
}
}
Recurse recursively walks the node tree to and calls do for every element if finds. You can then search for whatever you want.
If there are Y divs and by eye-d you mean eye- followed by a *d*igit/number, then it's as easy as while (Y--) document.getElementById('eye-'+Y).innerHTML=...
As I understand it, you have:
1. A div with an ID of eye-d.
2. There are several tables inside of this div.
3. You want to get each table and view its innerHTML.
var allTables = document.getElementById('eye-d').getElementsByTagName('table');
for(i in allTables){ alert(allTables[i].innerHTML); }