javascript - Editable Table - Make Last Row Not editable

Question

I am following this link: Editable Table Jquery PHP with MYSQLi and I have it going well for the most part, but I want my last row not editable. It's a row that sums the data above. Is there a quick fix to the code?

$(document).ready(function(){
    $('#editable_table').Tabledit({
        deleteButton: false,
        editButton: false,          
        columns: {
          identifier: [0, 'id'],                    
          editable: [[1, 'name'], [2, 'gender'], [3, 'age'], [4, 'designation'], [5, 'address']]
        },
        hideIdentifier: true,
        url: 'live_edit.php'        
    });
});

Update: Forgot to mention that user can add data to the table, so the last row is not a fixed number. I have found this code

Syntax: HTMLCollectionObject = table.rows;
lastRow = mytable.rows.item(mytable.rows.length-1);

but I'm not sure where/how to use it.

Answer 1

Tabledit only converts tbody td into editable fields, everything else is ignored. Ref: github source,

So to prevent a cell from being editable, either set it as a <th> or move it into the <tfoot>

In your case, the easiest and most semantic solution would be to create a <tfoot> to store the totals. Similar to the markup on MDN’s html reference - tfoot

---

NB: Tabledit will still create the row’s controls, even when none of the cells are editable. These buttons won’t function, so you will probably want to:

Either: Remove them using one of Tabledit’s callbacks (onDraw, onAlways, …)

Or: Simply hide them with something like: tfoot .tabledit-toolbar { display: none; }

---

It’s difficult to tell how these changes will effect your Add buttons, as there isn’t a standard way of implementing the Add functionality. So YMMV but this will get you on the right path.