How to make HTML table cell editable

Question

I d like to make some cells of html table editable  simply double click a cell  input some text and the changes can be sent to server  I don t want to use some toolkits like dojo data grid  Because it provides some other features  Would you provide me some code snippet or advices on how to implement it

User · Answer

Try this code     function          td   dblclick function          var OriginalContent     this  text           this  addClass  cellEditing          this  html   lt input type  text  value   amp quot    OriginalContent    amp quot     gt           this  children   first   focus           this  children   first   keypress function  e            if  e which    13                var newContent     this  val                  this  parent   text newContent                 this  parent   removeClass  cellEditing                          this  children   first   blur function          this  parent   text OriginalContent         this  parent   removeClass  cellEditing                    You can also visit this link for more details      jQuery and Editable HTML table

User · Answer

HTML5 supports contenteditable    lt table border  3  gt   lt thead gt   lt tr gt Heading 1 lt  tr gt   lt tr gt Heading 2 lt  tr gt   lt  thead gt   lt tbody gt   lt tr gt   lt td contenteditable  true  gt  lt  td gt   lt td contenteditable  true  gt  lt  td gt   lt  tr gt   lt tr gt   lt td contenteditable  true  gt  lt  td gt   lt td contenteditable  true  gt  lt  td gt   lt  tr gt   lt  tbody gt   lt  table gt    3rd party edit  To quote the mdn entry on contenteditable     The attribute must take one of the following values          true or the empty string  which indicates that the element must be editable    false  which indicates that the element must not be editable          If this attribute is not set  its default value is inherited from its   parent element       This attribute is an enumerated one and not a Boolean one  This means   that the explicit usage of one of the values true  false or the empty   string is mandatory and that a shorthand     is not allowed        wrong not allowed  lt label contenteditable gt Example Label lt  label gt       correct usage  lt label contenteditable  true  gt Example Label lt  label gt

User · Answer

this is actually so straight forward  this is my HTML  jQuery sample   and it works like a charm  I build all the code using an online json data sample  cheers   lt  lt  HTML      lt table id  myTable  gt  lt  table gt     lt  lt  jQuery      lt script gt          var url    http   jsonplaceholder typicode com posts           var currentEditedIndex   -1            document  ready function                    getJSON url              function  json                    var tr                  tr       lt tr  gt                     tr append   lt td gt ID lt  td gt                     tr append   lt td gt userId lt  td gt                     tr append   lt td gt title lt  td gt                     tr append   lt td gt body lt  td gt                     tr append   lt td gt edit lt  td gt                         myTable   append tr                    for  var i   0  i  lt  json length  i                          tr       lt tr  gt                         tr append   lt td gt     json i  id     lt  td gt                         tr append   lt td gt     json i  userId     lt  td gt                         tr append   lt td gt     json i  title     lt  td gt                         tr append   lt td gt     json i  body     lt  td gt                         tr append   lt td gt  lt input type  button  value  edit  id  edit  onclick  myfunc     i         gt  lt  td gt                             myTable   append tr                                                             function myfunc rowindex                 rowindex                console log currentEditedIndex              if  currentEditedIndex    -1       not first time to click                 cancelClick rowindex                            else                   cancelClick currentEditedIndex                             currentEditedIndex   rowindex    update the global variable to current edit location                get cells values             var cell1        myTable tr eq      rowindex       td eq 0    text                 var cell2        myTable tr eq      rowindex       td eq 1    text                 var cell3        myTable tr eq      rowindex       td eq 2    text                 var cell4        myTable tr eq      rowindex       td eq 3    text                    remove text from previous click                 add a cancel button                 myTable tr eq      rowindex       td eq 4    append    lt input type  button  onclick  cancelClick   rowindex     id  cancelBtn  value  Cancel     gt                     myTable tr eq      rowindex       td eq 4    css  width    200                   make it a text box                 myTable tr eq      rowindex       td eq 0    html    lt input type  text  id  mycustomid  value      cell1      style  width 30px    gt                     myTable tr eq      rowindex       td eq 1    html    lt input type  text  id  mycustomuserId  value      cell2      style  width 30px    gt                     myTable tr eq      rowindex       td eq 2    html    lt input type  text  id  mycustomtitle  value      cell3      style  width 130px    gt                     myTable tr eq      rowindex       td eq 3    html    lt input type  text  id  mycustomedit  value      cell4      style  width 400px    gt                           on cancel  remove the controls and remove the cancel btn         function cancelClick indx                           console log  edit is at row gt  gt  rowindex     currentEditedIndex               indx   currentEditedIndex               var cell1        myTable  mycustomid   val                 var cell2        myTable  mycustomuserId   val                 var cell3        myTable  mycustomtitle   val                 var cell4        myTable  mycustomedit   val                       myTable tr eq      indx       td eq 0    html cell1                   myTable tr eq      indx       td eq 1    html cell2                   myTable tr eq      indx       td eq 2    html cell3                   myTable tr eq      indx       td eq 3    html cell4                   myTable tr eq      indx       td eq 4    find   cancelBtn   remove                      lt  script gt

User · Answer

This is a runnable example   x000D   x000D    function         td   click function event       if   this  children  input   length  gt  0            return false       var tdObj     this       var preText   tdObj html        var inputObj       lt input type  text    gt         tdObj html           inputObj width tdObj width                 height tdObj height                 css  border  0px  fontSize  17px                 val preText               appendTo tdObj               trigger  focus                trigger  select         inputObj keyup function event         if 13    event which       press ENTER-key         var text     this  val            tdObj html text                 else if 27    event which        press ESC-key         tdObj html preText                        inputObj click function          return false                    x000D   lt html gt       lt head gt           lt  -- jQuery source -- gt           lt script src  https   cdnjs cloudflare com ajax libs jquery 3 1 1 jquery min js  gt  lt  script gt       lt  head gt       lt body gt           lt table align  center  gt               lt tr gt   lt td gt id lt  td gt   lt td gt name lt  td gt   lt  tr gt               lt tr gt   lt td gt 001 lt  td gt   lt td gt dog lt  td gt   lt  tr gt               lt tr gt   lt td gt 002 lt  td gt   lt td gt cat lt  td gt   lt  tr gt               lt tr gt   lt td gt 003 lt  td gt   lt td gt pig lt  td gt   lt  tr gt           lt  table gt       lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Add  lt input gt  to  lt td gt  when it is clicked  Change  lt input gt  to  lt span gt  when it is blurred

User · Answer

If you use Jquery  this plugin help you is simple  but is good  https   github com samuelsantosdev TableEdit

User · Answer

You can use the contenteditable attribute on the cells  rows  or table in question   Updated for IE8 compatibility   lt table gt   lt tr gt  lt td gt  lt div contenteditable gt I m editable lt  div gt  lt  td gt  lt td gt  lt div contenteditable gt I m also editable lt  div gt  lt  td gt  lt  tr gt   lt tr gt  lt td gt I m not editable lt  td gt  lt  tr gt   lt  table gt    Just note that if you make the table editable  in Mozilla at least  you can delete rows  etc   You d also need to check whether your target audience s browsers supported this attribute   As far as listening for the changes  so you can send to the server   see contenteditable change events

User · Answer

Just insert  lt input gt  element in  lt td gt  dynamically  on cell click  Only simple HTML and Javascript  No need for contentEditable   jquery  HTML5  https   Jsfiddle net gsivanov 38tLqobw 2

User · Answer

This is the essential point although you don t need to make the code this messy  Instead you could just iterate through all the  lt td gt  and add the  lt input gt  with the attributes and finally put in the values    x000D   x000D  function edit el    x000D    el childNodes 0  removeAttribute  disabled    x000D    el childNodes 0  focus    x000D    window getSelection   removeAllRanges    x000D    x000D  function disable el    x000D    el setAttribute  disabled       x000D    x000D   lt table border gt  x000D   lt tr gt  x000D   lt td ondblclick  edit this   gt  lt input value  cell1  disabled onblur  disable this   gt  lt  td gt  x000D   lt td ondblclick  edit this   gt  lt input value  cell2  disabled onblur  disable this   gt  lt  td gt  x000D   lt td ondblclick  edit this   gt  lt input value  cell3  disabled onblur  disable this   gt  lt  td gt  x000D   lt td ondblclick  edit this   gt  lt input value  so forth     disabled onblur  disable this   gt  x000D   lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I am using this for editable field   x000D   x000D   lt table class  table table-bordered table-responsive-md table-striped text-center  gt  x000D     lt thead gt  x000D       lt tr gt  x000D         lt th class  text-center  gt Citation lt  th gt  x000D         lt th class  text-center  gt Security lt  th gt  x000D         lt th class  text-center  gt Implementation lt  th gt  x000D         lt th class  text-center  gt Description lt  th gt  x000D         lt th class  text-center  gt Solution lt  th gt  x000D         lt th class  text-center  gt Remove lt  th gt  x000D       lt  tr gt  x000D     lt  thead gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td class  pt-3-half  contenteditable  false  gt Aurelia Vega lt  td gt  x000D         lt td class  pt-3-half  contenteditable  false  gt 30 lt  td gt  x000D         lt td class  pt-3-half  contenteditable  false  gt Deepends lt  td gt  x000D         lt td class  pt-3-half  contenteditable  true  gt  lt input type  text  name  add1  value  spain  class  border-none  gt  lt  td gt  x000D         lt td class  pt-3-half  contenteditable  true  gt  lt input type  text  name  add1  value  marid  class  border-none  gt  lt  td gt  x000D         lt td gt  x000D           lt span class  table-remove  gt  lt button type  button  x000D                                class  btn btn-danger btn-rounded btn-sm my-0  gt Remove lt  button gt  lt  span gt  x000D         lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

I have three approaches  Here you can use both  lt input gt  or  lt textarea gt  as per your requirements   1  Use Input in  lt td gt    Using  lt input gt  element in all  lt td gt s    lt tr gt  lt td gt  lt input type  text  gt  lt  td gt      lt  tr gt    Also  you might want to resize the input to the size of its td  ex    input   width 100   height 100       You can additionally change the colour of the border of the input box when it is not being edited   2  Use contenteditable  true  attribute   HTML5   However  if you want to use contenteditable  true   you might also want to save the appropriate values to the database  You can achieve this with ajax   You can attach keyhandlers keyup  keydown  keypress etc to the  lt td gt   Also  it is good to use some delay   with those events when user continuously types  the ajax event won t fire with every key user press  for example      table td   keyup function       clearTimeout   data this   timer       var wait   setTimeout saveData  500      delay after user types     this  data  timer   wait       function saveData              ajax         3  Append  lt input gt  to  lt td gt  when it is clicked   Add the input element in td when the  lt td gt  is clicked  replace its value according to the td s value  When the input is blurred  change the  td s value with the input s value  All this with javascript

User · Answer

You can use x-editable https   vitalets github io x-editable  its awesome library from bootstrap

[html] How to make HTML table cell editable?

Examples related to html

Examples related to editor

Examples related to html-table

Examples related to cell