javascript - How to add jquery tabledit buttons to new rows of a table - Stack Overflow

admin管理员组

文章数量:1410724

How to tell to jQuery tabledit that the rows are changed? The buttons only generated for existing rows, when I add a new row (for example using jQuery), the table buttons doesn’t appear in the new row. I saw in tabledit code, that there is possibility to switch between view and edit mode (maybe this would help me), but don’t know how to access these methods after the tabledit is created and when rows has been changed.

A little snippet from my code:

$(document).ready(function(){ 
    $(‘#btn’).click(function(){ ... adding row, I need to update tabledit here }); 
    $(‘#table’).Tabledit(...parameters...); } 
});

tabledit

How to tell to jQuery tabledit that the rows are changed? The buttons only generated for existing rows, when I add a new row (for example using jQuery), the table buttons doesn’t appear in the new row. I saw in tabledit code, that there is possibility to switch between view and edit mode (maybe this would help me), but don’t know how to access these methods after the tabledit is created and when rows has been changed.

A little snippet from my code:

$(document).ready(function(){ 
    $(‘#btn’).click(function(){ ... adding row, I need to update tabledit here }); 
    $(‘#table’).Tabledit(...parameters...); } 
});

tabledit

• javascript
• jquery
• html-table
• tableview

Share Improve this question Follow edited Mar 21, 2018 at 17:32 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 20, 2018 at 20:28 BrianBrian 111 silver badge55 bronze badges 5

• took a quick look and Tabledit doesnt seem to support adding rows// only edit/restore/delete. Re-initializing the $("#table").Tabledit() from scratch every time seems like the only way. – Steve0 Commented Mar 20, 2018 at 22:18
• 1 When I tried to reinitalize, it keeps adding the editor buttons multiple times next to the existing ones. – Brian Commented Mar 20, 2018 at 22:19
• Maybe I try to delete the tabledit editor column before reinitialize. – Brian Commented Mar 20, 2018 at 22:22
• unfortunately, I can’t use a different table solution now – Brian Commented Mar 20, 2018 at 22:27
• Can you provide the HTML before addition, after row addition, and the code where you add the row. – Steve0 Commented Mar 21, 2018 at 15:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here is the best solution I could e up with for your situation.

I created an "Add" button. NOTE the for-table attribute so I can figure out what table to add to later.

<button id='add' for-table='#example1'>Add Row</button>

Then I created a click handler for the "Add" button.

$("#add").click(function(e){
    var table = $(this).attr('for-table');  //get the target table selector
    var $tr = $(table + ">tbody>tr:last-child").clone(true, true);  //clone the last row
    var nextID = parseInt($tr.find("input.tabledit-identifier").val()) + 1; //get the ID and add one.
    $tr.find("input.tabledit-identifier").val(nextID);  //set the row identifier
    $tr.find("span.tabledit-identifier").text(nextID);  //set the row identifier
    $(table + ">tbody").append($tr);    //add the row to the table
    $tr.find(".tabledit-edit-button").click();  //pretend to click the edit button
    $tr.find("input:not([type=hidden]), select").val("");   //wipe out the inputs.
});

Essentially;

1. Deep Clone the last row of the table. (copies the data and attached events)
2. Determine and set the row identifier.
3. Append the new row.
4. Automatically click the Edit button.
5. Clear all inputs and selects.

In my limited testing this technique appears to work.

jQuery Tabledit should be executed every time a table is reloaded. See answer given here: refreshing Tabledit after pagination

This means that every time you reload the table (e.g. navigating to new page, refreshing etc), you must initialize Tabledit on the page of the table where it wasn't initialized. The problem is that there is no way to know whether Tabledit has been initialized on the table already, hence if you re-initialize it, duplicate buttons (edit, delete..) will be added to the rows of the table. You also cannot destroy a non-existent Tabledit, hence calling 'destroy' always beforehand will not help.

I hence created my own function to tell me if Tabledit is initialized on a certain page of a table or not:

function hasTabledit($table) {
    return $('tbody tr:first td:last > div', $table).hasClass("tabledit-toolbar");
}

and using it as follows:

if( !hasTabledit($('#table')) ) {
   $('#table').Tabledit({
     url: 'example.php',
     columns: {
     identifier: [0, 'id'],
     editable: [[1, 'points'], [2, 'notes']]
   },
   editButton: true,
   deleteButton: false
  });
}

The hasTabledit(..) function checks whether the last cell of the first row of the table has a div which has the tabledit-toolbar class, since this is the div that holds the Tabledit buttons. You may improve it as you like. This is not the perfect solution but it is the best I could do.

本文标签： javascriptHow to add jquery tabledit buttons to new rows of a tableStack Overflow