Solved

Help needed rewriting a table

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

930 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

11 Experts available now in Live!

Get 1:1 Help Now