Develop Reference

Dynamically insert id into table element

I’m working on what I thought would be a simple project but is something I’m struggling with. I’m wondering if someone could review what I’m trying to do and give me some pointers on how to proceed.
The concept here is fairly simple...I thought - identify each table in an html file based on the "table" element, count the number of rows in each table and if the table has more than 10 rows, dynamically create a unique id for the table.
I know how to do all this (for the most part) but it doesn’t respond how I anticipate.
Here’s my initial javascript code attempt to dynamically create and insert the unique table id’s:
/* This function dynamically sets a unique id to each table found in the html page: */
function set_table_id(){
var num_tables = document.getElementsByTagName("table"); //determine the number of “table” nodes in the html
//alert("set_table_id function: The total number of table elements are: " + num_tables.length);
if (num_tables) { //if one or more table nodes are found…
var id_name = "dataTbl_"; // create the prepend string for table id value
var n = 1;
var i;
//for each table node found…
for (i=0; i < num_tables.length; i++) {
var id_name_new = id_name + n; //create the next unique table id from the prepend string
n++;
num_tables[i].id = id_name_new; //apply the latest table id to the current table
//this will be the call to the function to apply the datatables javascript to each table that has more than 10 rows:
//num_tables[i].dataTable();
}
}
}
When I run the above js code there are no errors when I review the Inspect Element Console, but the unique id’s never get inserted into the table elements.
This should run through the html code, identify each table and dynamically apply (insert) a unique id to each table but it's not.
Any help is greatly appreciated.

This jQuery selector will find all tables that have 10 or more <tr> children and apply the ID and DataTables to each.
$(document).ready(function() {
$("table > tbody > tr:nth-child(10)").closest("table").each(function(index) {
var tableId = "dataTbl_" + (index + 1); //index is zero-based, so add 1
$(this).attr("id", tableId); //set the ID attribute
$(this).dataTable();
}
);
});
Heres is a JSFiddle, based on the on in your comment, which demonstrates it:
https://jsfiddle.net/5cgbdLzt/2/
Within that fiddle, I added a button that will alert the IDs to you, where you can see clearly that the ID of the table with fewer than 10 rows has an ID that is undefined.
Note: DataTables uses jQuery as a dependency, so it's assumed you can use jQuery selectors rather than strictly vanilla JS.

How do I loop over images in table, get the src of ALL images and apply to new images in new table?

I am looping through the images in a table, trying to get the source and then applying that src to a new image in a different table. I have managed to create new image objects in the new table cells (tested) but for some reason all I can get is the last image to display. Well, actually I know this is because the loop writes over the variable each time and it has the last value when it is applied, but I don't know how to get them all. Here is the relevant code. If you need more just holler or see Why can't I get my images to appear in table cells/nodes.. maybe I can get some closure? Thanks for your help.
newImages = newTable.getElementsByTagName('img');
for(var i = 0; i < newImages.length; i += 1) {
var picSource = newImages[i]['src'];
console.log(picSource);//This logs the path to the four different images
var newImg = new Image();//creates a new image for each
newImg.src = picSource;//gives each image src?? Just gives the last image
}

There are two ways you might go about this, either creating new img elements and copying over the src property, or just clone the element. For example, if you have the following table:
<table id="t0">
<tr><td><img src="a.png">
<tr><td><img src="b.png">
<tr><td><img src="c.png">
</table>
You can get all the images in the document using document.images, but you want just the ones in the table so you can do:
var images = document.getElementById('t0').getElementsByTagName('img')
which is a live collection (it will be updated automatically if you add or remove images from the table), or using a selector:
var images = document.querySelectorAll('#t0 img')
which is a static collection that stays the same no matter what you do to the table. The first method is supported in all browsers in use, but most will also support the selector version.
To make another table with the same images by copying the src property, you could do:
var table = document.createElement('table');
var row, cell, img;
for (var i=0, iLen=images.length; i<iLen; i++) {
row = table.insertRow(-1);
cell = row.insertCell(-1);
// create new image and append to cell
img = new Image();
img.src = images[i].src;
cell.appendChild(img);
}
Using the clone method, the last 3 lines can be replaced with:
cell.appendChild(images[i].cloneNode(false));
Finally, add the new table to the document:
document.body.appendChild(table);

jquery if statement for div id

So I have an HTML table that populates based on a mysql query. It is contained within:
<div id="punchclock" class="timecard">
And I have the following jQuery script which calculates the totals of the times entered into the HTML table. However, it is repeating the "Total:" line of the script in the header (a separate div) and the table I want. Is there a way to ensure the code only outputs to the desired div?
$('table').each(function(){
var tr = {};
$(this).find('tr').each(function(){
var key = $(this).find('td.job_code').text();
var val1 = toSeconds($(this).find('td.hrs').text());
//var val = +$(this).find('td.hrs').text().split(':')[0];
if(tr[key]){
tr[key]+=val1;
}else{
tr[key]=val1;
}
});
$(this).append(function(){
var tfoot = $('<tfoot/>', {
html: addRows(tr)
});
return tfoot;
});
});
I believe the issue lies with the tfoot return statement as it is returning it to the header div and my table div. As always, any help is greatly appreciated. Thanks.

Select only the table in the div you have defined:
$('#punchclock table').each....
Your current code will run for every table on the page, and it sounds like you have multiple tables. By selecting #punchclock table, it only uses the tables inside #punchclock.
If you want to run this for only one table, it would be better to give that one table an id like <table id="schedule">, then get rid of your each loop, and select the table directly like $('table#schedule').
Also, this block looks suspect:
$(this).append(function(){
var tfoot = $('<tfoot/>', {
html: addRows(tr)
});
return tfoot;
});
I don't know what addRows does but it does not look necessary. Try this instead:
$(this).append($('<tfoot/>').append(tr));

jQuery break out of table

I have a standard HTML formatted table, that dynamically generates the content, via Zend Framework. From which I have an issue altering the form internally PHP side. So I need to alter the tables appearance somehow. With that on the occasion I have an element show up in one of the rows and when this element shows up I want to break out of the table and then do something after it then start the table again.
Basically I want to inject the equivlant of
</tbody></table>/*other stuff*/<table><tbody> after the row containing the one element I seek which in this case is a label.
I tried $("label[for='theLable']").parents('tr').after('</tbody></table><br><table><tbody>') which appears to ignore the ending table parts add the br, and then does a complete open/close tag for table and tbody within the same table I am trying to break out of so inbetween tr tags basically it adds this new table
Whats the best way to approach this concept?
update with jsfiddle link
http://jsfiddle.net/cPWDh/

You can't really modify the HTML of the document the way you're thinking, since it's not a legitimate way to alter the DOM.
Instead, I would create a new table and .append the rows you want to move to it, which will automatically move them from their current location (instead of copying them):
$(document).ready(function() {
var $trow = $('label[for="specialLabel"]').closest('tr'),
$table = $trow.closest('table');
$('<table>').append( $trow.nextAll().andSelf() ).insertAfter($table);
});​
http://jsfiddle.net/cPWDh/1/

this approach won't work in js. What you could do if the table has not too many rows is this:
var nextTable = $("table").after("/*other stuff*/<table id="nextTable"></table>");
//now you loop over the lines of your original table that you want to have after the "break", and move them to the nextTable:
var before = true;
$("table tr").each(function(){
if ($(this).has("[for='theLable']")) {
before = false;
}
if (!before) {
nextTable.append($(this));
}
});

IE7 problems with displaying text in TD

I can not figure out why the text inside the TD is not displayed in IE7. I am frustrated to the core cuz it works in FF! All I am trying to do is dynamically build a table onload... Any help will be greatly appreciated.
The complete script is at pastebin

User insertRow and insertCell to add Rows and Cells
Ex:
var row = table.insertRow();
row.id= rowid;
var headerCell = row.insertCell();
headerCell.colSpan = colspan;
headerCell.className = "rightAligned";
headerCell.innerHTML = "Header Text";

use the insertRow(-1) to add a row instead, and insertCell(-1) to add a column
updated code: http://pastebin.com/mTym410P

IE needs a TBODY. Just add it as the first child of your table and then append your rows and cells to that.