Manipulate HTML table with jQuery

Question

I have a table that looks like this:

I have this same chart on a few pages hard coded.

I want to be able to change the tables on all the pages using js and jQuery

I want to make it so that the YTD button is next to the From Date input and the MTD is next to the To Date input.

I have tried to do that here: http://jsfiddle.net/maniator/W9YFF/9/

But it seems that it gets messed up at some points.

How do I fix that?

UPDATE

If I try doing

$('input[type="button"][value="YTD"]').insertAfter($('#fdate'));
$('input[type="button"][value="MTD"]').insertAfter($('#tdate'));

My result looks like this:

Meaning you want them closer to the input field? They already look like they're sort of by the inputs in your jsfiddle. — kinakuta
– kinakuta, Commented Jun 15, 2011 at 19:01

Niklas · Accepted Answer · 2011-06-15 19:57:03Z

Did I misunderstand something crucial here, or just do this?

$('input[type="button"][value="YTD"]').insertAfter($('#fdate'));
$('input[type="button"][value="MTD"]').insertAfter($('#tdate'));

example: http://jsfiddle.net/niklasvh/TghZ3/

edit

If you want to edit the table structure instead, you could do this:

$(".main tr:not(:first):not(:last)").append($('<td />'));
$(".main tr:first th, .main tr:last td").attr('colspan',3);


$(".main tr:lt(2) td:last").append($('.YTD'));
$(".main tr:lt(3) td:last").append($('.MTD'));

example: http://jsfiddle.net/niklasvh/TghZ3/41/

edit 2

If you just want to add new cells to those 2 rows and colspan the rest:

$(".main td:last-child:not(.first)").attr('colspan',function(i,a){
    if (typeof a == "undefined") a = 1;
    return (parseInt(a)+1);
});

$(".main tr:first th, .main tr:last td").attr('colspan',3);


$(".main tr:lt(2) td:last").attr('colspan','').after($('<td />').append($('.YTD')));

$(".main tr:lt(3) td:last").attr('colspan','').after($('<td />').append($('.MTD')));

example: http://jsfiddle.net/niklasvh/TghZ3/57/

Collectives™ on Stack Overflow

Manipulate HTML table with jQuery

UPDATE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related