We Keep Coding

Write to HTML file from Javascript

I know it's been asked before, but I can't seem to figure out any way of doing this. I return a 2D array from a Java method and want to print the results into a table. I have table headers already declared above it. I call createT() after somebody submits a previously defined form. The array the Java method returns is correct, I just can't seem to print off the table.
<table>
...
<tbody>
<script>
function createT(){
<% int[][]x = query.getData(); %>
var result;
for(var i=0; i<x.length; i++) {
results+= "<tr bgcolor = 'red'>";
for(var j=0; j<x[i].length; j++){
result+="<td>"+x[i][j]+"</td>";
}
result += "</tr>";
}
document.write(result);
}
</script>
</tbody>
</table>

document.write will delete all existing HTML.
You can try this
document.getElementById('YourtableId').appendChild(result);
Also create elements using document.createElement

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.

How to extract html markup from plain texts

I have bunch of html data in plain texts that I got from CKEditor. It contains table structures and bunch of html markup.
I was wondering if there is a way to extract table structure and td data only.
The plain texts could be something like
first table....bunch more texts here...
<table>
<tr><td> data1 </td></tr>
<tr><td> data2 </td></tr>
<tr><td> data3 </td></tr>
</table>
end of table. test data here...
<table>
<tr><td> data4 </td></tr>
<tr><td> data5 </td></tr>
<tr><td> data6 </td></tr>
</table>
end of second table and bunch more texts....
I have tried
//tableData contains everything the user type in CKEditor.
var table = tableData.getElementsByTagName ('table');
but i just realized these texts are no in dom. They are just plain texts I extract from CKEditor.
How do I extract these table data?
Thanks for the help!

I assume that you have a tableData string from which you want to extract DOM nodes to be able to work on them.
To avoid parsing you can insert this string into temporary DOM element.
var temp = document.createElement( 'div' );
div.innerHTML = tableData;
// Retrieve all tables.
var tables = div.getElementsByTagName( 'table' );

You want something like the following which pulls all of the tables into an array and then iterates over them. Here is a fiddle that shows this in action as well http://jsfiddle.net/M5nMY/. I am assuming here that tabledata is the id of the DOM element containing the tables.
var tableData = document.getElementById('tabledata');
var tables = tableData.getElementsByTagName('table');
var data = new Array();
for(var k = 0; k < tables.length; k++){
var table = tables[k];
for(var i=0; i< table.rows.length; i++){
var row = table.rows[i].cells;
for(var j=0; j < row.length; j++){
data.push(row[j].innerHTML);
}
}
}
Note in this case, I have pushed all of the data from all of the tables into a single array one row at a time.

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.