Можно ли редактировать данные, найденные в таблицах HTML?

Question

Мне не удалось это выяснить, но есть ли рекомендуемая библиотека JavaScript / плагин, которая позволяет пользователю редактировать данные в таблице, как и любой тип ввода? Или мне просто создать таблицу с вводом текста в тегах <td /> таблицы?

Answer 1

Используйте потрясающий плагин Datatables jquery в сочетании с его редактируемым дополнением - см. Демонстрацию здесь: http://jquery -datatables-editable.googlecode.com / svn / trunk / index.html

Datatables - http://datatables.net/ Аддон, который добавляет к нему возможность редактирования - http://code.google.com/p/jquery-datatables-editable/

Answer 2

Если вы заинтересованы в решении без плагинов, просто нацеливайтесь на ячейки,

Если вы знаете идентификатор таблицы:

document.getElementById("**tableID**")
  .getElementsByTagName("tr")[Row Number]
  .getElementsByTagName("td")[Cell Number];

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

document.getElementsByTagName("table")[Table Number]
  .getElementsByTagName("tr")[Row Number]
  .getElementsByTagName("td")[Cell Number];

Например, если бы существовала таблица с 2 строками и 2 столбцами, и я хотел, чтобы у всех них был номер, я бы просто сделал:

var tableElm = document.getElementById("**tableID**") //table element
  .getElementsByTagName("tr")[0]  //row element
  .getElementsByTagName("td");  //individual cells

the table and row selection is now cached in tableElm
tableElm[0].innerHTML = "1";
tableElm[1].innerHTML = "2";
tableElm[2].innerHTML = "3";
tableElm[3].innerHTML = "4";

вам даже не нужно ".getElementsByTagName (" tr ") [0]", если у вас нет причин запрашивать сами строки.Если вы избавитесь от этого, CELL NUMBER будет включать каждую ячейку таблицы независимо от строки.

Answer 3

Будет ли эта функция то, что вы ищете? http://itlivewire.com/tuts/jquery-dynamically-change-table-rows.html

Или, если вы хотите, чтобы клиент мог редактировать таблицу, этот плагин может быть более полезным: http://code.google.com/p/jquery-datatables-editable/