Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 212
  • Last Modified:

Help needed rewriting a table

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
tonelm54
Asked:
tonelm54
  • 2
1 Solution
 
Chris StanyonCommented:
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
 
tonelm54Author Commented:
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
 
Chris StanyonCommented:
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

Independent Software Vendors: 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!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now