Javascript-форум - Редактируемая таблица

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Редактируемая таблица (https://javascript.ru/forum/dom-window/24378-redaktiruemaya-tablica.html)

Редактируемая таблица

Доброго времени суток! Задача была сделать таблицу с начальной формой 2х2 и сделать 4 кнопки (добавить/удалить столбец и аналогично строку). Реализовать получилось Готовый вариант, но сказали доделать. В общем по сути надо сделать таблицу функционала Excel, удалить выбранные строки и столбцы и добавлять например после выделенного.
Ну со строкой в принципе ясно, нужны "chechbox". но в остальном ума не приложу как это всё реализовать! Может кто подскажет или ссылку на пример какой то. Заранее благодарен.

при нажатии на ячейку запоминаете её индексы (местонахождения)

ну а потом делайте с выделенной строкой\столбцом\ячейкой, что хотите.

если попроще редактируемая таблица нужна то есть,
например такая
http://demos.kendoui.com/web/grid/editing.html
если нужно посложнее, то мне нравится в extjs
http://dev.sencha.com/deploy/ext-4.0...l-editing.html

там много примеров, посмотрите

Получилось сделать так, все операции по нажатии на ячейку, а как быть если нужно ввести текст вместо выделения ячейки?
http://jsfiddle.net/QhL9E/1/

Код:

<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>

Новый вариант, получилось добавлять текст, но теперь нужно оставить ввод текста без кнопок, то есть нажал на ячейку - ввел текст, нажал на другую текст сохранился. как в excel'e

не сохраняет данные

http://jsfiddle.net/QhL9E/17/

Закинул файлики на сервер

Думал нашёл что надо

Красивая табличка с кнопками, ввожу текст в ячейки, всё нормально, жму сохранить.

Перегружаю страницу, но реально ничего не сохраняется, всё остаётся как было, без записей

В чём суть или я чего то не понял ?