动态地将行添加到日期数组

Question

function init(year, month) {
    $('#table_main').find('tbody').empty();
    var row = $('#row_template').find('tr')[0];
    var date = new Date(year, month, 1);
    $(row).find('.date').val(date.toISOString().substring(0, 10));
    var rows = 15;
    //populate
    var clone;
    var dateI = date.getTime() + 1;
    for (var i = 0; i < rows; i++) {
        if (i !== 0) dateI += 24 * 60 * 60 * 1000;
        clone = row.cloneNode(true);
        $(clone).find('.date').val(new Date(dateI).toISOString().substring(0, 10));
        $('#table_main tbody')[0].appendChild(clone);
    }
}
$('#month').on('change', function() {
    init($('#year').val(), this.value)
});
$('#year').on('change', function() {
    init(this.value, $('#month').val())
});
//note the use of 'on' for event delegation
//events will "bubble up" from the table 'table_main'
//(adding event handlers automatically to any elements appended later, effectively)
$('#table_main').on('click', '.addButton', function (e) {
//$('#table_main').find('tbody').empty();
   // var row = $('#row_template').find('tr')[0];
    //var clone = row.cloneNode(true);
   // $('#table_main tbody')[0].appendChild(clone);
    //$('#table_main tbody>tr:last').clone(true).insertAfter('#table_main tbody>tr:last');
    //$('<tr>some more HTML here</tr>').appendTo('#table_main tbody');
    //$(this).closest('#table_main tbody')[0].appendChild(clone);
    var myRow = "<tr><td>C</td><td>3</td></tr>";
     $("#table_main tr:first").after(myRow);
});
$('#table_main').on('click', '.deleteButton', function (e) {
    // if ($('#table_main > tr').length) {
        $(this).closest('tr').remove();
    //}
    updateRowHours($(this).closest('tr'));
});
$('#table_main').on('click', '.clearButton', function(e) {
    //var tr = $(this).closest('tr');
    //tr.find('.addBtn').trigger('click');
    //tr.find('.removeBtn').trigger('click');
    $(this).closest('tr').find('.addButton, .deleteButton').trigger('click');
    //updateRowHours($(this).closest('tr'));
});
$('#table_main').on('input', '.t1', function (e) {
    updateRowHours($(this).closest('tr'));
});
$('#table_main').on('change', 'select', function (e) {
    updateRowHours($(this).closest('tr'));
});

您好，我正在尝试动态添加行。这是一个更大的脚本的一小部分。我在我当前行之后插入一行时遇到问题。我似乎只能将它添加到数组的开头或结尾。但我需要它添加到我点击按钮所在的位置。所以，如果我在2015年8月4日和4/09/15低于它，那么我需要在这两者之间添加行。单击保留任何行的日期。 （见图片，了解正在发生的事情。）

以下是我正在使用的表格的屏幕截图。

Answer 1

这就是你想要的吗？

$('#table_main').on('click', '.addButton', function (e) {
    var myRow = "<tr><td>C</td><td>3</td></tr>";
     $(this).closest('tr').after(myRow);
});