Форум

magicpro · #1 (**permalink**) 27.12.2011, 23:54

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

melky · #2 (**permalink**) 28.12.2011, 00:11

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

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

Pavel M. · #3 (**permalink**) 28.12.2011, 10:26

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

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

magicpro · #4 (**permalink**) 03.01.2012, 11:11

Получилось сделать так, все операции по нажатии на ячейку, а как быть если нужно ввести текст вместо выделения ячейки?
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>

magicpro · #5 (**permalink**) 23.01.2012, 12:07

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

palexa · #6 (**permalink**) 15.02.2013, 20:43

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

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

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

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

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

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

Форум

Справочник

Discord чат

Курсы javascript