Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Help needed rewriting a table

Posted on 2013-12-05
3
Medium Priority
?
211 Views
Last Modified: 2013-12-20
I'm trying to make a function to table a tables ID and then redraw the table with my own styling (with scroll bars etc). So what I've started with is taking a table and just redrawing it.

I need to separate the first row from the rest of the table and then replace the existing table with my new code, so what Ive got soo far is:-
function modTable($tableID) {
	var $firstRow = $($tableID).children('tr:first');
	var $restRows = $('$tableID > tr').not(':first');

	var $outputHTML = '<TABLE id="' + $tableID.attr('id') + '"><TR>';

	$('$firstRow td').each(function()  {
		$outputHTML += "<TD>" + $this.innerHTML() + "</TD>";
		});
	$outputHTML += '</TR>';


	$('$restRows tr').each(function()  {
		$outputHTML.append("<TR>");
		$('$this td').each(function(){
			$outputHTML += "<TD>" + $this.innerHTML() + "</TD>";
			});
		$outputHTML += "<TR>";
		});
	$outputHTML += "</TABLE>";
	$tableID.replaceWith($outputHTML);
	}

Open in new window


Ive saved a jsFiddle at Link, does anyone know what Im doing wrong?

Thank you
0
Comment
Question by:tonelm54
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39699981
I haven't ran through your code, but it looks like it will just replace the table with exactly the same HTML. I'm guessing that's not what you intend, so maybe you need to clear up what you want.
0
 

Author Comment

by:tonelm54
ID: 39700581
Its not what I finally need, but I need the individual elements to build a final table, so its a work in progress.

The idea of this example is to recreate the table, but its only so I can see how to get the individual elements out and then I can use it to build the final product.

Thank you
0
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 39700632
OK. Have a look at this and see if it helps. It's a little long winded so you can see exactly what's going on. Rather than try and concatenate the whole table into an HTML string, I've created jQuery objects (table, rows, cells):

function modTable($table) {
	var $firstRow = $('tr:first', $table);
	var $restRows = $('tr:gt(0)', $table);
	
	//create a new table with the ID from the old one
	var $newTable = $('<table>').attr('id', $table.attr('id'));
	
	//create a new row
	var $newRow = $('<tr>');
	
	//loop through the TDs of the first row
	$('td', $firstRow).each(function(i, td) {
		//create a new TD in the new TR and add the content of the old TD
		$newRow.append( $('<td>').html( $(td).html() ) );
	});
	
	//add the new row to the new table
	$newTable.append($newRow);
	
	
	//now loop through the rest of the rows
	$restRows.each(function(i, tr) {
		//create a new row
		$newRow = $('<tr>');
		
		//loop through the TDs of each TR and add them to the new row
		$('td', tr).each(function(i, td) {
			$newRow.append( $('<td>').html( $(td).html() ) );
		});
		
		//add the enew row to the new table
		$newTable.append($newRow);
	});
	
	//replace the old table with the new one
	$table.replaceWith($newTable);
}

Open in new window

Call the function with a jQuery table object as the argument:

modTable( $('#testTable') );

Open in new window

0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question