VPF::jQuery - работа с строками в таблице

ST_Falcon

Дата 15.5.2008, 13:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 330
Регистрация: 14.11.2003
Где: Львов

Репутация: нет
Всего: 1

доброго времени суток.

вот столкнулся с такой проблемой. нужно мне удалять и дублировать строки в таблице средствами JS. так как на сайте уже используется jQuery, то хотелось бы это делать с его помощью.

поделитесь примером или посоветуйте в какую сторону копать smile

--------------------

моё портфолио :: мой блог :: мой любимый проект

krundetz

Дата 15.5.2008, 15:46 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 2
Всего: 69

Добавлять новые строки подойдет функция append. Её же можно использовать для копирования. удалять строки можно при помощи remove

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

ST_Falcon

Дата 15.5.2008, 18:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 330
Регистрация: 14.11.2003
Где: Львов

Репутация: нет
Всего: 1

krundetz, спасибо. удаление работает

Код


<input type="submit" value="-" onclick="$('#keyword_tr_{$smarty.section.keyword.index}').remove()">

но думаю, что это можно сделать не указывая прописывая id строки. сейчас буду разбираться.

--------------------

моё портфолио :: мой блог :: мой любимый проект

ST_Falcon

Дата 15.5.2008, 18:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 330
Регистрация: 14.11.2003
Где: Львов

Репутация: нет
Всего: 1

сделал вот так

Код


<script type="text/javascript">
<!--
function delete_row(obj) {
    var row = obj.parentNode.parentNode;
    $(row).remove();
}

function clone_row(obj) {
    var row = obj.parentNode.parentNode;
    $('<tr align="center">'+$(row).html()+'</tr>').insertAfter($(row));
}
-->
</script>

в html выглядит так

Код


    <tr>
        <td>
            <img src="/img/add.png" onclick="clone_row(this)" alt="Êîïèðîâàòü" title="Êîïèðîâàòü">
            <img src="/img/delete.png" onclick="delete_row(this)" alt="Óäàëèòü" title="Óäàëèòü">
        </td>
    </tr>

Добавлено через 8 минут и 9 секунд
плохо, что html() возвращает, то что внутри тегов <tr></tr>... как бы все вместе вытянуть?

--------------------

моё портфолио :: мой блог :: мой любимый проект

ST_Falcon

Дата 15.5.2008, 19:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 330
Регистрация: 14.11.2003
Где: Львов

Репутация: нет
Всего: 1

все таки вот так правильнее клонировать

Код


$(row).clone().insertAfter($(row));

--------------------

моё портфолио :: мой блог :: мой любимый проект

krundetz

Дата 16.5.2008, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 2
Всего: 69

Цитата(ST_Falcon @ 15.5.2008, 19:36)

все таки вот так правильнее клонировать

Код


$(row).clone().insertAfter($(row));

Насколько я понял из документации на visualjquery.com эту конструкцию можно заменить следующей:

Код


$(tablica).append($(strocaIstochnik));

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

ST_Falcon

Дата 17.5.2008, 00:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 330
Регистрация: 14.11.2003
Где: Львов

Репутация: нет
Всего: 1

krundetz, таким образом строка будет добавлена в конец таблицы, а не после клонированной строки. мне нужно после smile

--------------------

моё портфолио :: мой блог :: мой любимый проект

krundetz

Дата 17.5.2008, 00:28 (ссылка)

(нет голосов)

Загрузка ...

Вечный странник

Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 2
Всего: 69

ST_Falcon тогда да мой вариант не пройдет но если понадобиться скопировать строку в конец таблицы то он то что надо.
P.S. Если не трудно обясни пожалуйста зачем тебе две подряд идущие одинаковые строки очень уж интересно стало.

--------------------

!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород

ST_Falcon

Дата 17.5.2008, 17:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 330
Регистрация: 14.11.2003
Где: Львов

Репутация: нет
Всего: 1

krundetz, так заказчик хочет.

у меня в строке с десяток полей ввода. и чтобы не вводить все заново (если нужно поменять одно значение) её удобней клонировать.

--------------------

моё портфолио :: мой блог :: мой любимый проект

Fortop

Дата 17.5.2008, 18:01 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 2200
Регистрация: 13.11.2007
Где: Донецк

Репутация: нет
Всего: 42

ST_Falcon,

Цитата(ST_Falcon @ 17.5.2008, 17:22

)

у меня в строке с десяток полей ввода. и чтобы не вводить все заново (если нужно поменять одно значение) её удобней клонировать.

не понял.
Кто и откуда вводит значения заново?

--------------------

Мир это Я.
Живее всех живых.

MagicPRO

Дата 1.12.2011, 12:37 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 200
Регистрация: 4.10.2006
Где: Kremencity

Репутация: нет
Всего: нет

Сделал таблицу при помощи grid. Смог реализовать удаление/добавление строки только.

Код

<HTML>
<HEAD>
        <TITLE>ТЕХНТРОН </Title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.grid.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#myTable').grid();
});
</script>
<style type="text/css">
* {font-size: 12px; font-family:Arial;}
td {text-align: center;}
td .gridEdit {border:7px solid #555555; text-align: center; width:100%; border:none; background-color:#E0E9EF;}
tr.editMode td {background-color:#FF7F7F;}

#wrapper {margin:0 auto; width:99%;}
#myTable {border:10px solid #eeeeee; width:99%;}
#myTable th {background-color:#aaccee;}
</style>
</HEAD>

<BODY>

<div id="wrapper">
    <div id="myTable">
       <div style="padding: 3px">
           <input type="button" class="btnAdd" value="Add" /> 
           <input type="button" class="btnDel" value="Delete" />
           </div>
      <table  cellspacing="0" cellpadding="1" style="width:100%"> 
       <tbody>
           <tr id="row_1">
                <th><input type="checkbox" name="selAll" class="selAll" value="1" /></th>
                <th>Заказчик</th>        
                <th>E-mail</th>        
                <th>Отзыв</th>        
            </tr>
            <tr id="row_2">
                <td><input type="checkbox" name="items[]" class="items" value="2" /></td>
                <td class="txt">НПЗ</td>
                <td class="txt">[email protected]</td>
                <td class="sel">
                    <span>Положительный</span>
                    <select style="display: none;">
                        <option value="0"></option>
                        <option value="1">Положительный</option>
                        <option value="2">Нейтральный</option>
                        <option value="3">Отрицательный</option>
                        <option value="4">Нет отзыва</option>
                    </select>
                    <input type="hidden" value="1" />
                </td>
            </tr>
        </tbody>
        </table>
    </div>
</div>
</BODY>
</HTML>

А вот собственно jquery

Код

;(function($){
    $.fn.grid = function(options) {
    
        var curText = '';
        
        $.fn.grid.defaults = {
            msgConfirmDelete: 'Вы уверены что хотите удалить отзыв?',
            msgNoSelectedItems: 'Вы не выбрали ни один пункт',
            rowColorOdd: '#eeeeef',
            rowColorEven: '#ffffff',
            rowColorOn: '#FFAC7F',
            rowColorOff: '',
            rowColorEdit: '#FF7F7F',
        };
        var options = jQuery.extend({}, $.fn.grid.defaults, options);

        _grid = this;
        var $this = null;
               
        function deleteRows(){
            var boxes = $this.find('input:checkbox.items:checked');
            if(!boxes.length){
                alert(options.msgNoSelectedItems);
                return false;
            }
            if(!confirm(options.msgConfirmDelete)){
                return false;
            }
            for(var i=0; i<boxes.length; i++){
                $('#row_' + boxes[i].value).fadeTo(5000, 1).remove();
            }
            refreshZebra();
        }
        
        function addRow(){
            var tpl = $this.find('tr:last').clone();
            var newId = parseId(tpl.attr('id')) + 1;
            
            tpl.attr('id', 'row_' + newId);
            tpl.find(':checkbox').val(newId);
            
            bindDblClick(tpl.find('td.txt'));
            tpl.find('td.txt').find('span').html('');
            
            bindHovers(tpl);
            bindLeaveSelect(tpl.find('td.sel select'));
            $this.find('table').append(tpl);
            
            refreshZebra();
        }
        
        function parseId(mixedId){
            var arrId = mixedId.split('_');
            return parseInt(arrId[1], 10);
        }
        
        function saveAll(){
            
        }        
        function editTxt(td){
            var span = td.find('span');
            curText = span.html();
            
            td.css('width', td.css('width'));
            td.css('height', td.css('height'));
            
            var parentRow = td.parent(); 
            parentRow.css('background-color', options.rowColorOff).addClass('editMode');
            
            span.hide();
                      
            if(td.hasClass('txt')){
                var inp = td.find('input');
                if(!inp.length){
                    inp = $('<input type="text" value="' + curText + '" class="gridEdit" />');
                    td.append(inp);
                    inp.keypress(function(e){
                        bindLeaveEdit(inp, e);
                    }).blur(function(e){ bindLeaveEdit(inp, e); });
                } else {
                    inp.val(curText);
                    inp.show();
                }
            } else if (td.hasClass('sel')) {
                var inp = td.find('select');
                var val = td.find('input:hidden').val();
                
                inp.find('option[value="' + val + '"]').attr('selected', 'selected');
                inp.show();
                           
            }
            inp.focus();
        }
             function bindLeaveEdit(edit, ev){
           ev.cancelBubble = true;
           var span = edit.prev('span');
           
           if(ev == undefined){
               edit.hide();
               span.show();
               edit.parent().parent().removeClass('editMode');
           }
           var keyCode = ev.keyCode ? ev.keyCode : ev.which;
           if(keyCode == 13){
               if(edit.parent().hasClass('txt')){
                   span.html(edit.val()+'');
               } else if (edit.parent().hasClass('sel')){
                   span.html(edit.find(':selected').html()+'');
               }
               exitEditMode(edit, span);
           } else if(keyCode == 27 || keyCode == undefined){
               exitEditMode(edit, span);
           } else if(keyCode == 9){
               span.html(edit.val()+'');
               exitEditMode(edit, span);
               
               var nextTd = edit.parent().next('td');
               nextTd.trigger('dblclick');      
           }
           refreshZebra();
        }
        
        function exitEditMode(edit, span){
           edit.hide();
           span.show();
           edit.parent().parent().removeClass('editMode');
        }
        
        function bindLeaveSelect(select){
            select.change(function(){
                var _sel = $(this);
                var span = _sel.prev('span');
                span.html(_sel.find(':selected').html()+'');
                _sel.next('input:hidden').val(_sel.find(':selected').val());
                
                span.show();
                _sel.hide();
                _sel.parent().parent().removeClass('editMode');
            });
            refreshZebra();
        }
        
        function refreshZebra(){
           $this.find('tr:odd').css('background-color', options.rowColorOdd);
           $this.find('tr:even').css('background-color', options.rowColorEven);
        }

        function bindHovers(jqRowObj){
            jqRowObj.mouseover(function(){
                                var row = $(this);
                                options.rowColorOff = row.css('background-color');
                                if(!row.hasClass('editMode')){
                                    row.css('background-color', options.rowColorOn);
                                } else {
                                    row.css('background-color', options.rowColorEdit);
                                }
                            })
                            .mouseout(function(){
                                if(!$(this).hasClass('editMode')){
                                    $(this).css('background-color', options.rowColorOff);
                                }
                            })
           ;
        }
        
        function bindDblClick(jqCell){
            jqCell.dblclick(function(){
                if(!$(this).parent().hasClass('editMode')){
                    editTxt($(this));
                }
            });
        }
             
        return this.each(function() {
            $this = $(this);
            
            $this.find('td.txt').wrapInner('<span></span>');
            bindHovers($this.find('tr'));
            
            refreshZebra();
            
            $this.find('input:checkbox.selAll').click(function(){
                if(this.checked){
                    $this.find('input:checkbox.items').attr('checked', 'checked');
                } else {
                    $this.find('input:checkbox.items').removeAttr('checked');
                }
            });
            
            $this.find('.btnDel').click(function(){
                deleteRows();
            });
            
            $this.find('.btnAdd').click(function(){
                addRow();
            });
            
            $this.find('.btnSend').click(function(){
                saveAll();
            });
            
            bindDblClick($this.find('td.txt, td.sel'));
            
            bindLeaveSelect($this.find('td.sel select'));
            
        });        
    };
})(jQuery);

P.S. сказали убрать метод for(т.к. это древний метод))))

--------------------

smile=iwashere

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »