2012-08-15 5 views
0

У меня есть таблица HTML и вы хотите, чтобы пользователь нажал кнопку, чтобы добавить новую строку, но новая строка не будет добавлена ​​в конце но, скорее, после последней строки полей ввода.jQuery Добавление новой строки таблицы не в конце таблицы

я установка образца JSFiddle по адресу:

http://jsfiddle.net/n7Gup/2/

У меня есть кнопка New Row, но это не клонирование последнего ряда входов (то есть строки, где кнопка новой строки). Мне нужно изменить это так, чтобы он вставлял новую строку после последней из этих входных строк.

Вот скрипт, который я нашел в интернет-учебник:

$(document).ready(function($) 
{ 
    // trigger event when button is clicked 
    $("#button2").click(function() 
    { 
    // add new row to table using addTableRow function 
    addTableRow($("#nextYear")); 

    // prevent button redirecting to new page 
    return false; 
    }); 

    // function to add a new row to a table by cloning the last row and 
    // incrementing the name and id values by 1 to make them unique 
    function addTableRow(table) 
    { 
    // clone the last row in the table 
    var $tr = $(table).find("tbody tr:last").clone(); 

    // get the name attribute for the input and select fields 
    $tr.find("input,select").attr("name", function() 
    { 
     // break the field name and it's number into two parts 
     var parts = this.id.match(/(\D+)(\d+)$/); 

     // create a unique name for the new field by incrementing 
     // the number for the previous field by 1 
     return parts[1] + ++parts[2]; 
    // repeat for id attributes 
    }).attr("id", function() 
    { 
     var parts = this.id.match(/(\D+)(\d+)$/); 
     return parts[1] + ++parts[2]; 
    }); 

    // append the new row to the table 
    $(table).find("tbody tr:last").after($tr); 
    }; 
}); 

Новая строка, которая создается может иметь все входные поля пустыми, как пользователь начнет снова. Также есть способ, чтобы кнопка New Row появилась только один раз, и это всегда будет в последней строке входов активности. Например, изначально будет только одна строка, но если вы нажмете кнопку New Row, вторая строка будет создана ниже начальной строки, а кнопка New Row появится только в этой вновь созданной строке.

Оцените любую помощь - я новичок на этом Javascript на этом этапе.

+1

Это не очень хорошо, но http://jsfiddle.net/n7Gup/3/ – ahren

+0

Я не понимаю, где вы хотите его добавить? – Anonymous

+1

Почему бы просто не указать строку после ее добавления и добавить ее с помощью 'after' или в самом начале с' prepend() '? – Anonymous

ответ

1

Вот решение

http://jsfiddle.net/7vuZf/3/

В основном вы просто передать ссылку на кнопку нажала и совершайте свое позиционирование в таблице оттуда - сохранить ссылку на текущую последнюю строку (используя ближайший(), клонировать его (с событиями), удалить новую строку в оригинале (возможно, вам нужно заменить ее кнопкой удаления) и вставить клон после оригинала.

Также теперь вам, вероятно, не нужно ссылка на объект таблицы, переданный вашему обработчику кликов (я оставил его в c ode, хотя).

Смежные вопросы