Javascript 使用jQuery操作HTML表

我有一张这样的桌子：

我有几页硬编码的图表

我希望能够使用js和jQuery更改所有页面上的表

我想使YTD按钮位于

From Date

输入旁边 MTD位于迄今为止的

输入旁边

我在这里尝试过这样做：

但它似乎在某些时候变得一团糟

我该如何解决这个问题


更新
如果我试着做

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

我的结果如下：

我是误解了这里的一些重要内容，还是只是这样做

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

例如：

编辑

如果要改为编辑表结构，可以执行以下操作：

$(".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'));

$（“.main tr:not（：first）：not（：last）”）.append（$（''）；
$（“.main tr:first th，.main tr:last td”）.attr（'colspan'，3）；
$（“.main tr:lt（2）td:last”）。追加（$（'.YTD'）；
$（“.main tr:lt（3）td:last”）。追加（$（'.MTD'）；

例如：

编辑2

如果只想将新单元格添加到这两行中，然后将其余的单元格列为colspan：

$(".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')));

$（“.main td:last child:not（.first）”）.attr（'colspan'，function（i，a）{
如果（a的类型==“未定义”）a=1；
返回（parseInt（a）+1）；
});
$（“.main tr:first th，.main tr:last td”）.attr（'colspan'，3）；
$（“.main tr:lt（2）td:last”）.attr（'colspan'，''）.after（$（''）.append（$（'.YTD'））；
$（“.main tr:lt（3）td:last”）.attr（'colspan'，''）.after（$（''）.append（$（'.MTD'））；

示例：
意味着您希望它们更靠近输入字段？它们看起来已经有点像是JSFIDLE中的输入了。@kinakuta，是的，但看看其他行……啊，好吧，我只是集中在这些上——回头看。