mindmup / editable-table

tiny jQuery/Bootstrap widget that makes a HTML table editable
MIT License
686 stars 324 forks source link

not working on rows added dyamically #1

Open manikantareddygk opened 10 years ago

manikantareddygk commented 10 years ago

working excellent on table row, predefined but editing is not working on rows added,dynamically if there is any snippet please let me know

erobertson42 commented 10 years ago

I noticed this as well. However, calling ".editableTableWidget()" on the table again will take care of it. Though I wonder if it would be beneficial to have a standard reload/refresh method to handle this.

myselfsufiyan commented 9 years ago

thanks @Nullity42 works great.. but you are right there should be some standard way to do it...

pierresh commented 9 years ago

:+1: :wink:

harvimt commented 8 years ago

:+1:

Jettkeith0380 commented 8 years ago

O

Max-Might commented 8 years ago

I noticed this as well. However, calling ".editableTableWidget()" on the table again will take care of it.

Yes but it will bind the events twice :( This bug really needs a proper fix and not a workaround.

bcheck commented 8 years ago

Works for me if I add the tds with tabindex=1 set. e.g. $('#tbl tr:last').after('<tr><td tabindex=1>0</td><td tabindex=1>stuff</td></tr>'); (and only calling .editableTableWidget one time)

kevin-miles commented 8 years ago

I tried bcheck's solution, but it still added multiple listeners to existing tds.

To prevent this I use a custom init function rosterEdit: $('#mainTable').editableTableWidget().rosterEdit()

Insert an unbind() before any listeners are added to remove existing events: element.find('td').unbind().on('change', function (evt) {}).on('validate', function (evt, value) {});

View the source on http://mindmup.github.io/editable-table/ to see an example of how to use the custom init function.

bcheck commented 8 years ago

FWIW - I'd use .on selectors instead of directly binding the tds in validations, e.g.:

$('#mainTable')
  .editableTableWidget()
  .on('validate', 'tbody td', function(evt, newValue) {
    return false; // mark cell as invalid
});

Include "tabindex=1" when adding rows as suggested before: $('#mainTable tbody tr:last').after('<tr><td tabindex=1>0</td><td tabindex=1>stuff</td></tr>');

And do nothing else. editableTableWidget() doesn't bind the tds itself, that's your custom validations; editableTableWidget() binds at the table level same as I'm suggesting above.