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

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

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

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

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

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


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

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



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


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

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

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

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

Вместо

Правильнее

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

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

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

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

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

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

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

Все получилось. each был заменен на clone. Может не самый лучший вариант, но на данную задачу пойдет!
Рабочий вариант
Спасибо всем за помощь!

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

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

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

http://jsfiddle.net/QhL9E/

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

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

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

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

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

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

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

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

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

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

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

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



Можно.

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

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');
  }

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');
  }

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

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

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

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

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

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

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

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

Это сообщение отредактировал(а) ksnk - 13.1.2012, 09:46

Присоединённый файл ( Кол-во скачиваний: 10 )
 editcell.zip 5,71 Kb

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

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


Это сообщение отредактировал(а) MagicPRO - 15.1.2012, 13:59

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

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

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

Это сообщение отредактировал(а) MagicPRO - 16.1.2012, 01:29

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

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

Это сообщение отредактировал(а) MagicPRO - 19.1.2012, 20:21

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

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

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

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