А как это сечас делается какие еще варианты существуют я только этот знаю с дивом и все?
И как этот инпут с дивом перемещается в задействованую ячейку вернее как он понимает координаты куда ему нужно попасть?

Из ячейки все стирается. В пустую, теперь уже, ячейку добавляется input и в него текст который был в ячейке. Так намного проще, поскольку не нужно высчитывать реальную позицию ячейки.

Тоесть в каждую ячейку инпут вставляется? Тоесть получается штук 100-150 инпутов. Может чтото я не так понял?

Это проделывается при каждом щелчке на ячейке. При щелчке в другом месте input удаляется, а его содержимое возвращается обратно на место.

Ищите в Jquery метод с вызовом getBoundingClientRect.

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

Хех, "намного проще" != "намного лучше" ))
Вообще есть идея рисовать таблицу не через table, а дивами, но это уже дело вкуса.
Координаты можно вычислить просуммировав ширину и высоту предыдущих столбцов и строк, соответственно, учтя отступы.
Что из этого окажется более кроссбраузерным при меньших жертвах - это и будет критерием при выборе.

Я этого не говорил.

Согласен на 100%. Только более кроссбраузерным окажется вариант без "летающего дива".

Здравствуйте,
у меня примерно такая же разработка. В целях самообразования пишу небольшой Calc-like грид.
Хочу спросить совета у специалистов. Когда генерируется грид, каждой ячейке присваивается уникальный id вида R10C5.
Соответственно первое - это строка, второе - столбец.
Когда я делаю подсветку шапки строки и столбца приходиться определять их координаты, точнее номер строки и столбца. На данный момент я это делаю распарсиванием id с помощью регулярных выражений, примерно так:

var str = jQuery(this).attr('id').match(/R[0-9]+|C[0-9]+/ig);
var row = str[0].replace("R", "");
var col = str[1].replace("C", "");

Можно конечно id упростить до вида 10_5, тогда его можно сплитом сразу разделить на координаты
Возможно лучшим вариантом будет с помощью jQuery определять номер строки и столбца, например вот так:

var col = jQuery(this).parent().children().index(jQuery(this));
var row = jQuery(this).parent().parent().children().index(jQuery(this).parent()) * 1 + 1;

Вопрос именно по производительности. Что быстрее и лучше будет работать при размере грида 100х100 например.
Предполагаю что RegExp будет быстрее, чем jQuery будет перебирать все элементы данного узла DOM.
Также хотелось бы в конце работы выставить работу на показ для критики/оптимизации специалистами.
Из практических задач:
- разработка самого грида
- поддержка навигации и редактирования значений (в стиле Excel/LibreCalc)
- поддержка работы с формулами внутри одного грида и между несколькими
- из методов: выдергивание значений из грида (ячейка, строка, столбец, диапазон) в виде массивов и JSON.
- небольшая панель форматирования стиля текста в ячейках
- поддержка диаграмм (думаю использовать jqplot)
... что то еще наверное добавиться чуть позже.
Уже есть рабочий макет, но сейчас занимаюсь оформлением в виде плагина jQuery и оптимизацией (на сколько могу...) параллельно изучаю и доки по написанию плагинов. Информации просто море :)
Есть конечно jQuery Sheet, но по ряду причин он меня не устраивает и самообразование конечно тоже немаловажно.
Спасибо всем кто поможет!

хорошая идея, упрощай, если есть возможность. Только я бы использовал класс (иначе нельзя будет вставить несколько grid'ов на страницу) и назвал бы его как-то так: myGrid-10-5. А так как этот id используется только для определения номера ячейки, я бы эту информацию в свойствах ячеек разместил:

cell.row = 10;
cell.column = 5;