Создание строки в таблице

@kristalic · Регистрация: 06.05.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте, как средствами jquery создать новую строку в таблице, с количеством ячеек, как в предыдущей строке?

На нативном джаваскрипте функция у меня выглядит так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function addRow (tableID)
{
var tbl = document.getElementById (tableID);                
var rws = tbl.rows;                                          
var lst = rws [rws.length - 1];                              
var cls = lst.cells.length;                                    
 
var ro = tbl.insertRow (1);                                   
for (var j = 0; j < cls; j++)                                  
   {
   var ce = ro.insertCell (-1);                                
   ce.innerHTML = '';        
   }
   
var cedit = ro.insertCell (-1);
cedit.innerHTML = '<input type="button" id="ok" value="ok" onclick=""><input type="button" id="del" value="del" onclick="DelRow(this)"> ';
}

Как переписать ее c использованием jquery?

@Lazy_Den · 23.10.2014, 10:28

Сообщение от kristalic

создать новую строку в таблице

Строка будет добавляться в конец таблицы? И нужно ли копировать содержимое предыдущей строки? Это уточните, а пока такой примерчик.

JavaScript
1
2
3
4
5
6
var tbl = $('#tbl');
tbl.on('click', '.copy', function(){
    var prevTr = $(this).closest('tr').prev('tr').clone();
    prevTr.find('td').html('&nbsp;');
    tbl.append(prevTr);
});

@kristalic · 23.10.2014, 11:50 **[ТС]**

Сообщение от Lazy_Den

Строка будет добавляться в конец таблицы? И нужно ли копировать содержимое предыдущей строки? Это уточните, а пока такой примерчик.

Спасибо, пока ждал ответа написал свою функцию:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
    $("#q").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' +'&nbsp;'+ '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });

Но после реализации начались другие проблемы

Теперь меня мучает вопрос, как в свежесозданных ячейках редактировать записи с помощью ранее созданной функции (как написать которую, кстати, подсказали тоже вы).

К сожалению, я пока еще практически не имею опыта в работе с Jquery, и буду вам признателен, если вы посмотрите на этот пример и подскажете, как правильно вызывать функцию добавления строки так, чтобы все кнопки "сохранить/очистить/отмена" продолжали работать в свежесозданных ячейках.

Что касается ответов на ваши вопросы, то в идеале:
1. Строка должна создаваться в самом верху таблицы
2. Содержимое предыдущей строки копировать не нужно, нужно создавать ее с пустыми ячейками

@Lazy_Den · 23.10.2014, 12:12

kristalic, Начнём с того, что $("#q").each() не имеет смысла, т.к. элемент #q - уникальный. Во-вторых, делегирование у вас не совсем правильное.

JavaScript
1
2
3
$('paren_static').on('event', 'dinamic_child', function(){
  
});

У вас же селектор "paren_static", указывает на элемент td, который был динамически добавлен.
Я ничего не имею против, но вы действительно хотите "собирать" новую строку именно так, как делаете сейчас?

@kristalic · 23.10.2014, 12:42 **[ТС]**

Сообщение от Lazy_Den

kristalic, Начнём с того, что $("#q").each() не имеет смысла, т.к. элемент #q - уникальный. Во-вторых, делегирование у вас не совсем правильное.
Код JavaScript
1
2
3
$('paren_static').on('event', 'dinamic_child', function(){
});
У вас же селектор "paren_static", указывает на элемент td, который был динамически добавлен.
Я ничего не имею против, но вы действительно хотите "собирать" новую строку именно так, как делаете сейчас?

Конечно же нет, просто это было единственным наспех придуманным решением

Сообщение от Lazy_Den

Код JavaScript
1
2
3
$('paren_static').on('event', 'dinamic_child', function(){
});

Вот в этом то месте я и запутался. Не понял как правильно написать.

Пишу, например, так:

JavaScript
1
2
3
4
5
$('table').on('click','.cancel', 'td', function() {
var ri=$(this).parent('td').parent().index();
var ci=$(this).parent('td').index(); 
$(this).parent('td').text(myTableArray[ri][ci]).removeClass('edited');
});

Функция срабатывает, но

JavaScript
1
2
3
4
5
6
$('table').on('click', 'td', function () { 
    
if($(this).hasClass('edited')) return false;
$(this).html($(inpMin).val($(this).text())).append(butMin).append(butCl).append(butCan).addClass('edited'); 
    
});

срабатывает вслед за ней

@Lazy_Den · 23.10.2014, 13:20

kristalic, дайте пару минут...

Добавлено через 27 минут
В общем, набросал вам такой вариант. Думаю, что так вам будет проще разобраться и уже допилить код так, как нужно вам. Если какие-то моменты не совсем будут ясны, то спрашивайте.

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var tbl = $('#q'),
    ctrlPanel = '<p class="ctrl"><input type="text" class="edit"><br><button class="save">save</button><button class="clear">clear</button><button class="cancel" >cancel</button></p>';
 
/*
* Добавление строки
*/
$('.addrow').click(function(){
    var newLine = $('tr:last',tbl).clone();
    newLine.find('td').html('&nbsp;');
    tbl.prepend(newLine);
});
/*
* Добавление колонок
*/
$('.addcol').click(function(){
    $('tr',tbl).each(function(i, el){
        $(el).append('<td>&nbsp;</td>');
    });
});
/*
* Добавляем панель управления
*/
tbl.on('click', 'td', function(){
    var $that = $(this);
    if($that.hasClass('edited')) return false;
    var txt = $that.addClass('edited').text();
    $(ctrlPanel).appendTo($that).find('.edit').val(txt);
});
/*
* Сохранение, очистка, выход
*/
var actions = {
    save: function(el){
        var but = $(el),
            td = but.closest('td');
        td.text(but.siblings('.edit').val());
        return this.stopEdit(td);
    },
    clear: function(el){
        $(el).siblings('.edit').val('');
        return false;
    },
    cancel: function(el){
        return this.stopEdit($(el).closest('td'));
    },
    stopEdit: function(td){
        td.removeClass('edited').find('.ctrl').remove();
        return false;
    }
};
tbl.on('click', '.ctrl button', function(e){
    e.stopPropagation();
    actions[$(this).attr('class')](this);
});

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

Создание строки в таблице

Решение