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?
If I try doing
$('input[type="button"][value="YTD"]').insertAfter($('#fdate'));
$('input[type="button"][value="MTD"]').insertAfter($('#tdate'));
My result looks like this:
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With