Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Редактирование таблицы при помощи Jquery

Автор: MagicPRO 29.11.2011, 17:03

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

Автор: Evghenusi 29.11.2011, 18:04

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

Автор: MagicPRO 29.11.2011, 18:35

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

Автор: $дмитрий 29.11.2011, 18:38

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

Автор: MagicPRO 29.11.2011, 18:53

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

Автор: $дмитрий 29.11.2011, 19:01

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

Код


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

Автор: MagicPRO 2.12.2011, 00:58

Сделал таблицу при помощи 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(т.к. это древний метод))))

Автор: MagicPRO 8.12.2011, 00:26

Вот пытался построить при помощи этого http://jsfiddle.net/X67jK/
но ничего не получается,подскажите в чем ошибка((

Автор: $дмитрий 8.12.2011, 09:56

Цитата

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

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

Код


tr:lasttd

Автор: MagicPRO 9.12.2011, 00:44

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

Автор: $дмитрий 9.12.2011, 05:46

Вместо

Код


$("tr","#myTable")

Правильнее

Код


$("#myTable tr")

Автор: MagicPRO 10.12.2011, 19:58

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

Автор: $дмитрий 11.12.2011, 07:38

Цитата

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

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

Код


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

Автор: MagicPRO 12.12.2011, 23:23

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

Автор: $дмитрий 13.12.2011, 09:49

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

Цитата

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

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

Автор: MagicPRO 15.12.2011, 13:05

проблема с each, в паре нужно использовать цикл for, а мне нужно без for. как поступить?!

Автор: $дмитрий 15.12.2011, 13:57

Цитата

проблема с each, в паре нужно использовать цикл for, а мне нужно без for. как поступить?!

Покажи пример с кодом, где там проблема с циклом

Автор: MagicPRO 16.12.2011, 02:20

Все получилось. each был заменен на clone. Может не самый лучший вариант, но на данную задачу пойдет!
http://jsfiddle.net/magicpro/hSuWr/26/
Спасибо всем за помощь!

Автор: MagicPRO 19.12.2011, 16:15

Теперь новая задача! Реализовать нужно что-то вроде excel'я. Чтоб удалить выбранный строку/столбец или добавить после выделенного строку/столбец.
Я так понял нужно использовать chekbox с условиями, но возможно есть другие методы!

Автор: ksnk 19.12.2011, 16:22

MagicPRO, Ищи плагин - "контекстное меню". Их дофига, если покопаться в плагинах jQuery. Вставить несколько строк в меню - удалить, добавить строку и т.д.
Можно отдельное менюшко с кнопками использовать сверху таблицы. Соответственно, клик по строке "выделяет" её, кнопка "удалить" удаляет выделенное...
Вообще - Excel - образец функциональности, привычной и интуитивно понятной простому народу. Если копировать внешность Excel - нужно скопировать и поведение? чтобы народ не вводился в недоумение...

Автор: MagicPRO 27.12.2011, 23:57

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

Автор: ksnk 28.12.2011, 00:45

Код


// выделить ячейку таблицы
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){ 
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }
})

// удалить строку
$('#delrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        $cell.parents('tr:eq(0)').remove();
    }
})

//удалить столбец
$('#delcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).remove();
        })
    }
}) 

// добавить столбец после
$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).after('<td>');
        })
    }
})    

// добавить строку после
$('#addrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.parent().prevAll('tr').length;
        var $myTr=$('#table tr').eq(cnt);
        $myTr.before($myTr.clone());
    }
})

http://jsfiddle.net/QhL9E/

Автор: MagicPRO 28.12.2011, 21:01

ksnk, спасибо вам огромное, разобрал ваш пример! очень хороший метод!

Кстати прописал его в html, стиль работает а jquery нет(

Код


<html>
    <head>
    <style> 
A:active{
    color:white;
    background:red;
}
#table td {
    width:50px;
 border: 3px solid grey;
}
</style>
    </head>
    <body>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }
})
$('#delrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        $cell.parents('tr:eq(0)').remove();
    }
})
$('#delcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).remove();
        })
    }
})
$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).after('<td>');
        })
    }
})    
$('#addrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.parent().prevAll('tr').length;
        var $myTr=$('#table tr').eq(cnt);
        $myTr.before($myTr.clone());
    }
})        
</script>
<button id='delrow'>delrow</button>
<button id='delcell'>delcell</button>
<button id='addcell'>addcell</button>
<button id='addrow'>addrow</button>

<table id="table">
    <tr>      <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
    </tr>
    <tr>      <td>2</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>3</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>6</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>8</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>9</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>10</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>11</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>12</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>13</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
        
</table>

    </body>
</html>

Автор: ksnk 28.12.2011, 22:41

MagicPRO, Для начала - нужно ТОЧНО скопировать css правила. Потом понять, зачем нужно 4 раза подгружать jQuery. Убрать лишние разы.

Jacascript, который использует jQuery, как правило, вызывается при загрузке страницы. Для этого он заключается в такую конструкцию

Код


$(function(){
  $(...
...

})

Автор: MagicPRO 28.12.2011, 23:39

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

Код


<html>
    <head>
    <style> 
.active{
    color:white;
    background:blue;
}
#table td {
    width:30px;
 border: 1px solid black;
}
</style>
    </head>
    <body>
      
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript">
$(function(){
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }
});
$('#delrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        $cell.parents('tr:eq(0)').remove();
    }
});
$('#delcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).remove();
        });
    }
});
$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $('td',this).eq(cnt).after('<td>');
        });
    }
}); 
$('#addrow').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.parent().prevAll('tr').length;
        var $myTr=$('#table tr').eq(cnt);
        $myTr.before($myTr.clone());
    }
}); 
});      
</script>
<button id='delrow'>Удалить строку</button>
<button id='delcell'>Удалить столбец</button>
<button id='addcell'>Добавить столбец</button>
<button id='addrow'>Добавить строку</button>

<table id="table">
    <tr>      <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
    </tr>
    <tr>      <td>2</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>3</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>6</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>7</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>8</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>9</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>10</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>11</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>12</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>      <td>13</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
        
</table>

    </body>
</html>

Автор: ksnk 29.12.2011, 00:22

Цитата(MagicPRO @ 28.12.2011, 23:39

)

одна функция странно работает

Что за функция, в каком броузере, как воспроизвести?
В моем хроме все в порядке.

Автор: MagicPRO 29.12.2011, 00:26

функция #addcell, в ИЕ 8 и мозиле одна и таже проблема, столбец добавляет но нет границ ячеек

Автор: ksnk 29.12.2011, 01:14

содержимое не копируется.
Тогда так:

Код


$('#addcell').click(function(event){
    var $cell=$('#table td.active');
    if($cell.length==1){
        var cnt=$cell.prevAll('td').length;
        $('#table tr').each(function(){
            $myTd=$('td',this).eq(cnt);
            $myTd.after($myTd.clone());
        });
    }
});

Автор: MagicPRO 30.12.2011, 12:41

да..теперь работает. спасибо!!а вообще странный случай что не прорисовывает границы ячеек....

Автор: MagicPRO 3.1.2012, 15:52

а в этом случае можно добавить функцию ввода текста в ячейку? например .dblclick() или вместо выделения просто .click() что сохранились функции изменения таблицы?

Автор: ksnk 3.1.2012, 16:40

Функции изменения таблицы никак не завязаны на содержимое таблицы. Все функции изменения таблицы используют специально отмеченную ячейку. Каким образом ее помечать - личное дело приложения, для простоты у меня меняется класс ячейки

Код


var $cell=$('#table td.active');

если есть надобность использовать другой способ отметки ячейки - нужно менять/заменить эти строки + функцию

Код


// выделить ячейку таблицы
$('#table').click(function(event) ...

Цитата(MagicPRO @ 3.1.2012, 15:52

)

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

Можно.

Автор: MagicPRO 4.1.2012, 10:48

Можно но вопрос как)).....прочитав документацию сделал вывод что это для каждой ячейки надо делать input text?

Автор: MagicPRO 5.1.2012, 14:39

ksnk,этот фрагмент когда делает активную ячейку в связи с которой потом форматируется таблица, а если её оставить активной но добавить возможность вводить текст.
$(function(){
$('#table').click(function(event){
  var $cell=$(event.target).parents('td').andSelf().filter('td');
  if( $cell.length>0){
    $('#table td').removeClass('active');
    $cell.addClass('active');
  }

Автор: MagicPRO 5.1.2012, 14:39

Автор: ksnk 5.1.2012, 15:24

Цитата(MagicPRO @ 5.1.2012, 14:39

)

а если её оставить активной но добавить возможность вводить текст.

Ну и что мешает? Вверху - отдельное поле ввода, в которое при "активации" копируется содержимое ячейки, а при нажатии на ввод это содержимое вставляется обратно и обнуляется?
Или каким-нибудь диалогом запрашиваем содержимое.
Или просто инпут "подравниваем" до границ ячейки и абсолютным позиционированием размещаем над ячейкой. По onblur содержимое ячейки вбрасывается в ячейку.

Что делалось и что не получается?

Автор: MagicPRO 6.1.2012, 00:38

про onblur, впервые слышу, надо почитать. просто т.к. идея "аля" excel, то полей за пределами таблицы быть не должно.

Автор: MagicPRO 12.1.2012, 21:31

ksnk, а можете сделать какие то наброски, как реализовать 3й вариант предложенный Вами. Я перечитал куча статей и никак не сведу мысли до кучи как это реализовать(

Автор: ksnk 13.1.2012, 01:47

Цитата(MagicPRO @ 12.1.2012, 21:31

)

какие то наброски...

Выдернул из своего проекта редактор, немножко с корнями... Пришлось срочно дописывать комментарии и тестовую страничку. Как-то не планировалось оформлять его как посторонний плагин, но вроде не так уж и плохо выглядит.

Если будут какие-то глюки - нужно докладывать.

Проверялся на IE9 , хроме и FF.

P.S. сейчас работает и на IE6-9

Автор: MagicPRO 15.1.2012, 13:45

спасибо за материал, только не работают стрелки почему то(

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

Автор: ksnk 15.1.2012, 19:42

Цитата(MagicPRO @ 15.1.2012, 13:45

)

спасибо за материал, только не работают стрелки почему то(

На моей тестовой страничке работают? В самой нижней таблице?
Где и как не работают?

Автор: MagicPRO 15.1.2012, 23:23

все заработал.....у меня есть идея попробую реализовать под свой код!

а для чего нужен файл editcell.js? editcell.min.js - описывает редактирование?

Автор: ksnk 16.1.2012, 08:33

editcell.min.js- сжатый YUCompressor'ом editcell.js

Автор: MagicPRO 19.1.2012, 20:18

Исходя из кода который был, нужно было дописать. Библиотечку "editcell" заброковали. Пришлось использовать textarea и получился вот такой вариант http://jsfiddle.net/QhL9E/17/, но теперь нужно без кнопок. Тоесть кликаешь на ячейку вводишь текст, кликаешь на другую он сохраняется. С вводом легко, можно убрать кнопку и сделать событие просто по click, а как прописать чтоб автоматически сохранялось?

Автор: ksnk 19.1.2012, 20:29

По какой причине забраковали библиотеку?

Автор: MagicPRO 19.1.2012, 23:25

библиотекой довольный, но нужен модернизированый этот код что у меня(

Автор: ksnk 20.1.2012, 00:26

Ну, флаг в руки. Все правильные буквы уже написаны smile

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

Автор: MagicPRO 26.1.2012, 21:51

ksnk, все таки мне понравился ваш пример разобрал и буду испльзовать его дальше, но возникла маленькая проблемка с textarea, при ожидании ввода текста перекрывает границу ячейки.