動態添加行到數組

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')); 
}); 

你好，我想在這裏動態添加行。這是一個更大的腳本的一小部分。我無法在當前行所在的行之後插入行。我只能將其添加到數組的開始或結尾。但我需要它添加在我下面點擊按鈕的地方。所以，如果我在4/8/15和5/9/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); 
});