Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Changing tag names

    Hello,
    I am trying to take:

    Code:
    <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

  • #2
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don,

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

    -Anuj

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    dragon6158 (06-11-2008)

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Could you give me an example of this please?

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,292
    Thanks
    10
    Thanked 583 Times in 564 Posts
    1. copy innerhtml value of the pre into a var
    2. build your table object
    3. insertBefore the pre
    4. removeChild on the pre
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    dragon6158 (06-11-2008)

  • #7
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts
    This is what I've got so far:

    Code:
    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.

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts
    I made some changes to my code above:

    Code:
    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?

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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.

  • #11
    New Coder
    Join Date
    Jan 2008
    Posts
    93
    Thanks
    30
    Thanked 0 Times in 0 Posts
    We figured it out. Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •