We Keep Coding

Duplicate a specific html code in jquery

I have a table with some complicated values (I mean I have to make several requests to get all the values that I want in it). I need to add rows at the end of this table and fill the cells with the same code as the existing html code.
For example, I have something like :
<table id="table_cultures">
<tr>
<td>Just a string</td>
<td>Dropdown</td>
<td><div class='foo'> something..</div></td>
</tr>
</table>
<button id="plus_button" onclick="addRow()">+</button>
Now, in my javascript, I have something like :
function addRow(){
var table = document.getElementById("table_cultures"); //Get the table element
var itk = document.getElementById('foo'); //Try to get the html to duplicate
var row = table.insertRow(-1); //Add in the end of the table
var c1 = row.insertCell(0);
var c2 = row.insertCell(1);
var c3 = row.insertCell(2);
c1.innerHTML= 'Culture';
c2.innerHTML='test';
c3.innerHTML=itk;
}
So, in the variable itk, I'm trying to get the html generated and pull it into the cell, bu[Object]t it displays just HTMLFormElement (because it's a table that I want to duplicate).
Is that possible to do it that way ? Or there is an other way more simple please ?

You shall consider cloning the row node instead of getting and setting innerHTML with some thing like this:
var table = document.getElementById("table_cultures"); //Get the table element
var row = document.getElementById("rowTobeCloned"); //clone the required row
var clone = row.cloneNode(true); // copy child nodes too
table.appendChild(clone); // append the new row to the end of the table

At the moment you are not using jQuery in your code at all, but if you are looking for a jQuery solution you should try .clone()
$("#table_cultures td:last").clone().appendTo("#table_cultures tr");
JSFiddle

You using class("class='foo'") not Id ("getElementById")
so it should be something like this
function addRow(){...
var itk = document.getElementsByClassName('foo')[0]; //Try to get the html to duplicate
...}

Using createDocumentFragment to replace an existing column in a table

I've read that createDocumentFragment is way more faster than appending elements one by one to the DOM in a for-loop, e.g. see here.
What I want to do:
Create a table column in a document fragment. This column should contain numbers from an array (for example "ratings").
After that I want to replace an existing column with the new one (the "fragment" one). So I can put the whole column to the DOM all at once.
My problem:
I can't really figure out how to replace an existing column if there already is one. Appending on the other hand is no problem.
My JSfiddle: http://jsfiddle.net/LEqG9/2/
Helpful links, here and here
HTML
<table id = "table">
<tr>
<th>Name</th>
<th>Rating</th>
</tr>
<tr>
<td>A.H.Hattray </td>
<td id = "row0"></td>
</tr>
<tr>
<td>Icke_eben </td>
<td id = "row1"></td>
</tr>
<tr>
<td>John_Doe123 </td>
<td id = "row2"></td>
</tr>
</table>
Javascript
var rating = [1, 10, 3];
var fragment = document.createDocumentFragment();
for (var i = 0, len = rating.length; i < len; i++){
var element = document.createElement('tr');
element.innerHTML = rating[i];
fragment.appendChild(element);
}
document.getElementById('table').appendChild(fragment); //I know here should be the code to replace the second column!

The following code demonstrates that it is possible to manipulate an existing table in a DocumentFragment.
var rating = [1, 10, 3];
var theTable = document.getElementById('table');
var frag = document.createDocumentFragment();
frag.appendChild(theTable);
var col2 = frag.querySelectorAll('tr td:nth-of-type(2)');
for (var i=0; i < col2.length; i++) {
col2[i].innerHTML = rating[i];
}
// it is also possible to use insertCell and deleteCell
var theRows = frag.querySelectorAll('tr');
for (var i=0; i < theRows.length; i++) {
var x = theRows[i].insertCell(1);
if (i > 0)
x.innerHTML = 'new one';
else
x.innerHTML = 'The Header';
}
document.body.appendChild(frag);
(Making the new cell in the first row a TH element, rather than TD requires a little more work, using createElement and appendChild or insertBefore.)
If you step through this the table is removed from the DOM when appended to the fragment, then reappears when the fragment is appended to the body.

Columns can't be put into the table all at once (and thus won't work as a fragment) because a column is a bunch of different cells in each of a whole bunch of rows - it's not an entity by itself.
One thing you could do for good performance is to temporarily hide the table with display: none, add all your rows/cells and then show the table again. This should allow the browser to avoid intermediate layout issues every time you add a new cell and you should only get one repaint with the final content.

Questions about dynamically creating divtags

I'm trying to dynamically create divtags for each cell of my table so that I can later fill them in with other stuff. However, when I tried doing this:
newhtml+="<div id ='" + (j) +"'><td class = 'unselected'>&nbsp?&nbsp</td></div>"
and later using it it acted as if it never created it.
So after browsing stackoverflow I found out that you should use this line of code to dynamically create a div tag:
var divtag = document.createElement('div');
But my question is how do I implement it into my js code?
Here is the section of code that is supposed to create divtags for later referencing:
newhtml+="<tr>";
for (var j = 0; j < $tblcols; j++){
newhtml+="<div id ='" + (j) +"'><td class = 'unselected'>&nbsp?&nbsp</td></div>";
And here is the section that uses it:
divtag = document.getElementById("'" + (++$counter2) + "'");
newhtml +="<td class = 'solved'><img src ='sc2units/" + $counter2 + ".jpg'></td>";
divtag.innerHTML = newhtml;
each section is a nested for loop that goes through the entire array of data that needs outputted.
EDIT: If there is an easier way to fill cells with data in an array I would be happy to know.

I'm not sure on your table, or setup, or exact needs.... But I believe you want to give content to certain table cells after you've already created the cells. You're on to the right idea with naming them, but you can't wrap <td>s in <div>s so your next best option is to simply name the <td>s themselves.
You could also add the content right inside the second loop, but we'll run with this.
HTML
<table id="myTable">
<tr>
<td>[ content ]</td>
</tr>
<tr>
<td>[ content ]</td>
<td>[ content ]</td>
</tr>
[ etc ]
</table>
JavaScript
var tbl = document.getElementById("myTable"),
rows = tbl.getElementsByTagName("tr");
// loop all rows
for (var r = 0; r < rows.length; r++){
// loop all cols within the row
var cols = rows[r].getElementsByTagName("td");
for (var c = 0; c < cols.length; c++){
cols[c].id = "row-" + r + "_col-" + c;
}
}
// usage
document.getElementById("row-1_col-1").innerHTML = "JS POWER";
http://jsfiddle.net/daCrosby/tJYNM/

You can create the elements separately then organize them later, inserting one inside the other. Something like:
var mydiv = document.createElement("DIV");
var mytd = document.createElement("TD");
mytd.innerHTML = "some basic text";
mydiv.appendChild(mytd); // insert the TD inside the DIV
document.body.appendChild(mydiv); // insert the DIV in the document's body
I just don't know what's about putting TD's inside DIV's...

question regarding javascript;Html generation and search current webpage for tags

Hi I have 3 questions, if you have for example this simple website
<html> <head> </head> <body> <table>
<tr> <td>www.hello1.com</td>
</tr> <tr> <td>www.hello2.com</td>
</tr> </table> </html>
Question 1)
If I for instance decide to click on link number 2 (www.hello2.com), Is this stored in some kind of variable?
I know that this is storing the current URL but not the one that you click
window.location.href;
Question 2)
How do you search your document, say that I would like to search the this website and store all the links in a javascript array like this
var myArray = [];
searchThisWebSiteForURLS()//Do this function that I don't know to write that search this htmlsite for url's
var myArray = [ 'http://www.hello1.com', 'http://www.hello2.com'];//This is the reslt after that the function has been executed
Question 3)
I would like to write out these links. Say that I have another table like this
<html> <head> </head> <body> <table>
<tr> <td>X</td>
</tr> <tr> <td>Y</td>
</tr> </table> </html>
Where X = http://www.hello1.com
And Y = http://www.hello2.com
Of course it shall be as many rows as there are elements in the array like this
<html> <head> </head> <body> <table>
<tr> <td>X</td></tr>
<tr> <td>Y</td></tr>
<tr> <td>Z</td></tr>
<tr> <td>A</td></tr>
<tr> <td>B</td></tr>
</table> </html>
Where Z, A, B are the elements 3,4,5 in the array
var myArray = [ 'http://www.hello1.com', 'http://www.hello2.com','http://www.hello3.com','http://www.hello4.com','http://www.hello5.com'];
EDIT!--------------------------------------------------------------------------
Wow really thanks, all of you, really thanks! I just have one more question regarding the links, when comparing two links, say that the array looks like this
var pageLinks = ['http://www.example.at', 'http://www.example2.at', 'http://www.someothersite.at'];
And say that the user has pressed the example "http://www.example.at" link, then I want to create the table containing the similar links. So I do something like this
function checkForSimilarLink(theLinkToCompareWith){// in this case theLinkToCompareWith = "http://www.example.at"
var numLinks = pageLinks.length;
for(var i = 0; i < numLinks; i++) {
//Check if numLinks[i]== theLinkToCompareWith*
}
}
So how would you write this compare function? In this case we can consider
"http://www.example.at" and "http://www.example1.at" the "same" while "http://www.someothersite.at" obviosly aren't
Thanks again :)

I didn't understand question 1, but here's something for question 2 and 3:
Question 2:
var pageLinks = [];
var anchors = document.getElementsByTagName('a');
var numAnchors = anchors.length;
for(var i = 0; i < numAnchors; i++) {
pageLinks.push(anchors[i].href);
}
//now pageLinks holds all your URLs
Question 3:
// say pageLinks holds your desired URLs
var pageLinks = ['http://www.example.at', 'http://www.example2.at', 'http://www.example3.at'];
// create an empty table
var table = document.createElement('table');
// ... and it's tbody
var tbody = document.createElement('tbody');
// loop through your URLs
var numLinks = pageLinks.length;
for(var i = 0; i < numLinks; i++) {
// create new table row...
var tr = document.createElement('tr');
// a cell...
var td = document.createElement('td');
// and your anchor...
var a = document.createElement('a');
// set the anchor's href
a.setAttribute('href', pageLinks[i]);
// set the anchor's text, it's also the URL in this example
a.innerHTML = pageLinks[i];
// append the anchor to the table cell
td.appendChild(a);
// ... and that cell to the new row
tr.appendChild(td);
// ... and that row to the tbody, right? ;-)
tbody.appendChild(tr);
}
// after all rows were added to the tbody,
// append tbody to the table
table.appendChild(tbody);
// and finally append this table to any existing
// element in your document, e.g. the body:
document.body.appendChild(table);
// ...or add it to a div for example:
//document.getElementById('anyDiv').appendChild(table);

Go study JQuery!!!! XDD The best for web development.
for the first and second question in with jquery:
var anchors = $('a'); //returns all <a></a> elements from here you can get the url from all of theam
With jquery u can write any element that you want.
var table = $('<table></table>');
var tr = $('<tr></tr>').appendTo(table);
var td = $('<td></td>').setText('your link here')appendTo(tr);
. . .
table.appendTo(The parent element to add the table);

Question 1:
You can capture the onclick event for clicking on the link and during that store whatever information you want to a variable of your choosing (though, this would only be relevant if you included return false in the onclick event because the link would otherwise take the user to a new page and end your session).
Question 2 and 3 were answered quite well by Alex.

Writing to an iframe from NSTextView

I have built a web based WYSIWYG editor, which Im accessing programatically from my cocoa application. At the moment I'm able to run scripts and retrieve the HTML from the iFrame in the editor, but I'm unable to send text from an NSTextView to the iFrame. Any ideas?
The editor is here http://www.alexmillsdesign.com/Developer/FernEngine/
Cheers
Alex Mills

I'm not an expert in this area but I have written sample code in the past that did something similar to this. The approach I took was the following: in your Cocoa class where you want to update the text insert code similar to
WebScriptObject *webScriptObject = [_webView windowScriptObject];
id result = [webScriptObject callWebScriptMethod:#"setTableRows" withArguments:[NSArray arrayWithObject:fauxData]];
where fauxData is whatever you want to pass to JS, and in the JS source have something similar to
var mytable = document.getElementById("myTable");
var mytbody = document.getElementById("myTbody");
var docFragment = document.createDocumentFragment();
var myNewtbody = document.createElement("tbody");
myNewtbody.id = "myTbody";
var trElem, tdElem, txtNode;
for(var j = 0; j < row_data.length; ++j) {
trElem = document.createElement("tr");
trElem.className = "tr" + (j%2);
tdElem = document.createElement("td");
tdElem.className = "col0";
txtNode = document.createTextNode(row_data[j].lastName);
tdElem.appendChild(txtNode);
trElem.appendChild(tdElem);
tdElem = document.createElement("td");
tdElem.className = "col4";
txtNode = document.createTextNode(row_data[j].firstName);
tdElem.appendChild(txtNode);
trElem.appendChild(tdElem);
docFragment.appendChild(trElem);
}
myNewtbody.appendChild(docFragment);
mytable.replaceChild(myNewtbody, mytbody);
and of course your HTML should have something like
<table id="myTable">
<thead id="myThead">
<tr>
<th>Last</th>
<th>First</th>
</tr>
</thead>
<tbody id="myTbody">
</tbody>
</table>
Obviously this fills in rows of data in a table, but updating text would be similar.