Solved

Help needed rewriting a table

Posted on 2013-12-05
3
198 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
  • 2
3 Comments
 
LVL 42

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 42

Accepted Solution

by:
Chris Stanyon earned 500 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery not selector 4 26
jQuery Time Off Event 20 42
CSS Divs in Safari 3 18
Angular - where do I need to put this code? 3 9
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now