1

I'm trying to make a feature using jquery to edit a HTML table of category names.

So far I have my table being populated using PHP/MySQL. This all works ok.

I've read jQuery - Edit a table row inline but that doesn't seem to solve the issue of how you would identify a record if you wanted to save it back to a database.

I've seen solutions that do things like this:

<tr id="2">
  <td>Foo</td>
</tr>
<td id="3">
   <td>Bar</td>
</td>

Is this approach of using ID's on the tr element acceptable? It seems somehow backward, as this isn't really how I understand ID's should be used within markup? For example if you had multiple tables (not that I do in my case) all the ID's within markup should be unique so that would be bad practice?

Are there better approaches to dealing with this?

Just for some background information, this is what I'm looking to achieve:

  1. The table is rendered on page load.
  2. Click an 'Edit' button on a table row.
  3. This turns the row editable - I believe something similar could be used to the link I posted.
  4. Change the 'Edit' button to say 'Save'. Clicking this triggers an ajax call, but this would need to post the row ID and textbox value back to my PHP script.

The data is relatively simple - there is only an ID and category name per table row.

Community
  • 1
  • 1
Andy
  • 5,142
  • 11
  • 58
  • 131
  • I'd personally say that's fine. `id` attributes should identify the element, which is what yours are doing, regardless of the source of the `id` content. – Rory McCrossan Nov 08 '16 at 14:56
  • But I thought that ID's were only supposed to be used once (unique) in a set of markup? I don't have multiple tables, but if I did, and they both had, for example, is that invalid markup? – Andy Nov 08 '16 at 14:58
  • Yes it would be, but given the `id` values are coming from your database there shouldn't be any duplicates - I'd hope there aren't otherwise you have much bigger problems than your HTML – Rory McCrossan Nov 08 '16 at 14:59
  • There aren't duplicates and there is only 1 table. But consider a situation where you were editing 2 (or more) different tables on the same web page. It is possible to have record ID's that are the same - if they are stored in multiple tables. For example the number '3' could be an ID in my categories table, but also a posts table. But you shouldn't use that as an ID in the markup because then it would be a duplicate? – Andy Nov 08 '16 at 15:01
  • 1
    In that case I'd prefix the `id` values, eg `cat-3`, `post-3` – Rory McCrossan Nov 08 '16 at 15:02
  • If this is bad practice, everyone doing anything interesting with tables in django is a bad programmer. – rob Nov 08 '16 at 16:30

1 Answers1

2

What you should be looking into is data attributes.

How you use them is ..

<tr data-id="2">
 <td>Foo</td>
 ....
</tr>
<tr data-id="3">
 <td>Bar</td>
 ....
 </td>

And lets say you need to get the id of a clicked row, you can do so by using .data() method.

...
$('tr').on('click', function(){
 id = $(this).data('id');
 ...
});
...
Mohd Abdul Mujib
  • 13,071
  • 8
  • 64
  • 88
  • 1
    I tried to edit this, `$('tr')` - needs quotes on the 'tr'. I can't edit this as it says edits must be at least 6 chars. But it works well, thank you very much. – Andy Nov 08 '16 at 15:29