VPF::Редактирование таблицы при помощи Jquery

MagicPRO

Дата 29.11.2011, 17:03 (ссылка)

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

Загрузка ...

Бывалый

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

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

Необходимо сделать форму с таблицей:
размер можно менять отдельными командными ( добавить строку (в конце), удалить строку(текущую), добавить столбец(в конце))
сделать 2 клавиши добавление и удаление.
первоначальный размер таблицы 2х2.
Как лучше сделать, до этого вечно конфликт строки со столбцом был.

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

smile=iwashere

Evghenusi

Дата 29.11.2011, 18:04 (ссылка)

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

Загрузка ...

майский жук

Профиль
Группа: Участник
Сообщений: 506
Регистрация: 3.8.2006
Где: Молдова, Кишинёв

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

делал подобное на чистом JS, и конфликтов не было.
можете его описать?

MagicPRO

Дата 29.11.2011, 18:35 (ссылка)

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

Загрузка ...

Бывалый

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

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

я сделал тоже на чистом яве...но сказали переделать на jquery.а я с ним не особо дружу. Может у кого есть примеры на Jquery, обшарил интернет подобного чето не нашел.

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

smile=iwashere

$дмитрий

Дата 29.11.2011, 18:38 (ссылка)

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

Загрузка ...

Эксперт

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

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

Для копировании строки достаточно посчитать количество td, затем в переменной сформировать всю строку и вставить результат, еще можно клонировать строку целиком и почистив содержимое td, вставить в таблицу
Для копировании столбца просто вставляем последним элементом новый td по всех tr

MagicPRO

Дата 29.11.2011, 18:53 (ссылка)

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

Загрузка ...

Бывалый

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

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

а при удалении??

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

smile=iwashere

$дмитрий

Дата 29.11.2011, 19:01 (ссылка)

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

Загрузка ...

Эксперт

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

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

Для удалении последней строки используй метод remove(), примерно так:

Код


$('tr:last-child').remove();

Это сообщение отредактировал(а) $дмитрий - 29.11.2011, 19:08

MagicPRO

Дата 2.12.2011, 00:58 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 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

MagicPRO

Дата 8.12.2011, 00:26 (ссылка)

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

Загрузка ...

Бывалый

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

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

Вот пытался построить при помощи этого сайта
но ничего не получается,подскажите в чем ошибка((

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

smile=iwashere

$дмитрий

Дата 8.12.2011, 09:56 (ссылка)

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

Загрузка ...

Эксперт

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

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

Цитата

но ничего не получается,подскажите в чем ошибка

Как минимум в этой записи

Код


tr:lasttd

MagicPRO

Дата 9.12.2011, 00:44 (ссылка)

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

Загрузка ...

Бывалый

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

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

Пардон, пост писал под шафэ).....в общем проведённый день прошел не зря! Перечитал кучу инфы по jQuery. И вот что получилось таблица !
Осталось 2 нерешенные задачи: 1 - Удаление столбца и 2 - Добавление строки длиною всей таблицы(в зависимости от количества столбцов)

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

smile=iwashere

$дмитрий

Дата 9.12.2011, 05:46 (ссылка)

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

Загрузка ...

Эксперт

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

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

Вместо

Код


$("tr","#myTable")

Правильнее

Код


$("#myTable tr")

MagicPRO

Дата 10.12.2011, 19:58 (ссылка)

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

Загрузка ...

Бывалый

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

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

Со строкой разобрался, а как удалить столбцы(((((

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

smile=iwashere

$дмитрий

Дата 11.12.2011, 07:38 (ссылка)

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

Загрузка ...

Эксперт

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

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

Цитата

Со строкой разобрался, а как удалить столбцы

С помощью each перебрать все tr, и применить на каждой итерации

Код


$('td:last', this).remove();

MagicPRO

Дата 12.12.2011, 23:23 (ссылка)

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

Загрузка ...

Бывалый

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

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

Метод удаление столбца, но все равно как-то удаляет криво! http://jsfiddle.net/magicpro/hSuWr/24/

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

smile=iwashere

$дмитрий

Дата 13.12.2011, 09:49 (ссылка)

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

Загрузка ...

Эксперт

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

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

Перечитай внимательно что написал

Цитата

С помощью each перебрать все tr, и применить на каждой итерации

Где цикл each? Не вижу

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