...

View Full Version : Changing tag names



dragon6158
06-11-2008, 09:20 PM
Hello,
I am trying to take:



<pre class='data'>|Version|Date|Author|Changes
1.0|5/5/2008|David Kisley|Initial Issue
1.0|5/5/2008|David Kisley|Initial Issue
1.0|5/5/2008|David Kisley|Initial Issue
1.0|5/5/2008|David Kisley|Initial Issue
</pre>


and build a table dynamically. I can get the individual rows and cells wrapped with <tr> and <td> tags easy enough. My problem is trying to replace the <pre> tags with <table> tags and retain the class='data'. I am having to use the <pre> tag to separate the individual rows.

Thanks for any assistance anybody can give me.

Don

omega113
06-11-2008, 09:30 PM
Don,

Can you post the part of code you are using currently.
There are myraid ways to do this.

-Anuj

dragon6158
06-11-2008, 09:44 PM
I don't have a working version yet. I've tried several different things that I thought would work but they didn't. I have been able to get an array built for the rows and I can look at the tag names using getAttribute but I haven't been able to figure out how to change the tag name from pre to table. Thanks.

Kor
06-11-2008, 10:11 PM
You can not change the tag's name. You can clone the content of a tag, you might build a list with it's attributes, but you can not change the tag's name. All you can do is to create another tag element, with all the content and attributes and replace the old one with the new one on using DOM methods.

dragon6158
06-11-2008, 10:14 PM
Could you give me an example of this please?

rnd me
06-11-2008, 10:41 PM
1. copy innerhtml value of the pre into a var
2. build your table object
3. insertBefore the pre
4. removeChild on the pre

dragon6158
06-12-2008, 09:06 PM
This is what I've got so far:


var lines = new Array();
var lineItems = new Array();
var headerLines = new Array();
var bodyLines = new Array();
var footerLines = new Array();
var tableLines;
var newTable;
var newLine;
var headerFound;
var footerFound;
var linesIndex;
var itemIndex;
var headerIndex = 0;
var bodyIndex = 0;
var footerIndex = 0;
var domObject;
function tableSetup(){
$('pre.data').each (function(index){
lines = this.innerText.split(/\n/);
for (linesIndex = 0; linesIndex <= lines.length - 1; linesIndex++){
newLine = '';
if (lines[linesIndex].charAt(0) == '|'){
headerFound = true;
lines[linesIndex] = lines[linesIndex].substring(1);
}
if (lines[linesIndex].charAt(0) == '|'){
footerFound = true;
headerFound = false;
lines[linesIndex] = lines[linesIndex].substring(1);
}
lineItems = lines[linesIndex].split('|');
if (headerFound){
for (itemIndex = 0; itemIndex <= lineItems.length - 1; itemIndex++){
newLine = newLine + $(lineItems[itemIndex]).wrap('<th></th>');
}
headerLines[headerIndex++] = $(newLine).wrap('<tr></tr>');
headerFound = false;
} else {
for (itemIndex = 0; itemIndex <= lineItems.length - 1; itemIndex++){
newLine = newLine + $(lineItems[itemIndex]).wrap('<td></td>');
}
if (footerFound){
footerLines[footerIndex++] = $(newLine).wrap('<tr></tr>');
footerFound = false;
} else {
bodyLines[bodyIndex++] = $(newLine).wrap('<tr></tr>');
}
}
}
tableLines = $(headerLines).wrap('<thead></thead>') + $(bodyLines).wrap('<tbody></tbody>') + $(footerLines).wrap('<tfoot></tfoot>');
newTable = $(tableLines).wrap("<table class='data'></table>");
$(this).insertBefore(newTable);
domObject = this;
domObject.removeChild(this);
});
}


I think that I am fairly close to what I need. I have the table built and I think that it is being inserted properly but it keeps giving me error messages when I try to remove the <pre> elements.

dragon6158
06-13-2008, 03:06 PM
I made some changes to my code above:



var lines = new Array();
var lineItems = new Array();
var headerLines = new Array();
var bodyLines = new Array();
var footerLines = new Array();
var tableLines;
var newTable;
var newLine;
var headerFound;
var footerFound;
var linesIndex;
var itemIndex;
var headerIndex = 0;
var bodyIndex = 0;
var footerIndex = 0;
var domObject;
function tableSetup(){
$('table.data').each (function(index){
lines = this.innerText.split('~ ');
for (linesIndex = 0; linesIndex <= lines.length - 1; linesIndex++){
newLine = '';
if (lines[linesIndex].charAt(0) == '|'){
headerFound = true;
lines[linesIndex] = lines[linesIndex].substring(1);
}
if (lines[linesIndex].charAt(0) == '|'){
footerFound = true;
headerFound = false;
lines[linesIndex] = lines[linesIndex].substring(1);
}
lineItems = lines[linesIndex].split('|');
if (headerFound){
for (itemIndex = 0; itemIndex <= lineItems.length - 1; itemIndex++){
newLine = newLine + '<td>' + lineItems[itemIndex] + '</td>';
}
headerLines[headerIndex++] = '<tr>' + newLine + '</tr>';
headerFound = false;
} else {
for (itemIndex = 0; itemIndex <= lineItems.length - 1; itemIndex++){
newLine = newLine + '<td>' + lineItems[itemIndex] + '</td>';
}
if (footerFound){
footerLines[footerIndex++] = '<tr>' + newLine + '</tr>';
footerFound = false;
} else {
bodyLines[bodyIndex++] = '<tr>' + newLine + '</tr>';
}
}
}
tableLines = '<thead>' + headerLines + '</thead>' + '<tbody>' + bodyLines + '</tbody>' + '<tfoot>' + footerLines + '</tfoot>';
alert(tableLines);
$(this).innerHTML = tableLines;
});
}


so that I am manually building each line and each section (header, body and footer) instead of trying to use the jQuery wrap function. Also, I am using <table class='data'> tags instead of <pre> tags like I was trying before.

When i use .innerText to put the text string holding these elements, it does nothing. If I use .innerHTML, it puts the elements there but as a comma delineated text string. What am I doing wrong?

Kor
06-14-2008, 10:45 AM
It is hard to say what is wrong in your code as you don't use javascript native functions or methods. I suspect you use JQuery or Prototype, of some library like that.

and yes: innerText is an IE only method, non-standard. But maybe you framework/library has a crossbrowser constructor of this kind, who knows?... It is hard to say till we don't see the library functions, but this is not an easy job.

Why don't you use clear plain javascript?

dragon6158
06-16-2008, 02:57 PM
Primarily because my supervisor wants to use jQuery for whatever reason. I thought I was only using jQuery for building and manipulating the <pre> elements. I will, at this point, gladly accept any advice you can give me.

dragon6158
06-16-2008, 11:16 PM
We figured it out. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum