Solved

Help needed rewriting a table

Posted on 2013-12-05
3
204 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 43

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 43

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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 …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

733 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