CODEWITHSUNDEEP
javascripthtml-table
Z. Charles Dziura
Z. Charles Dziura

Reputation: 933

Is it Possible to Edit Data Found in HTML Tables?

I haven't been able to find this out, but is there a recommended JavaScript library/plugin out there that allows for the user edit the data in a table, much like any sort of input? Or should I just create a table with text inputs in the table's <td /> tags?

Upvotes: 0

Views: 87

Answers (3)

timewaster51
timewaster51

Reputation: 120

If you're interested in a solution without plugins, simply target the cells,

If you know the ID of the table:

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

Otherwise you'll need to choose the table from the index

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

For instance if there was a table with 2 rows and 2 columns and I wanted them all to have a number I would simply do:

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

you don't even need the ".getElementsByTagName("tr")[0]" unless you have a reason to query the rows themselves. If you get rid of it, CELL NUMBER will include every cell of the table regardless of row.

Upvotes: 1

techfoobar
techfoobar

Reputation: 66693

Use the fabulous Datatables jquery plugin in combination with its editable addon - See demo here: http://jquery-datatables-editable.googlecode.com/svn/trunk/index.html

Datatables - http://datatables.net/ The addon that adds editability to it - http://code.google.com/p/jquery-datatables-editable/

Upvotes: 2

dangerChihuahua007
dangerChihuahua007

Reputation: 20915

Would this feature be what you are looking for? http://itlivewire.com/tuts/jquery-dynamically-change-table-rows.html

Or if you want the client to be able to edit a table, this plugin might be more useful: http://code.google.com/p/jquery-datatables-editable/

Upvotes: 1

Related Questions