All geek questions in one place

Best way to identify an element for interacting with jQuery

Let's say I have a table of items, and I want to add a button to each line to remove that item. Elements come from the database, so they have a unique identifier. In the jQuery function, I need to get the identifier of the specified element so that I can open a confirmation window and, ultimately, redirect the browser to the delete page (never check security, for internal use).

Where in the markup is it better to place the identifier?

+4
source share
8 answers

Is it just me, or is it that simple?

<tr id="cell-8958"><td>..<td><td class="delete">Delete me</td></tr>

...

 $('.delete').click(function(){ thisid = $(this).parent().attr('id'); dostuff(); });

Edit: Or if you want to start with numbers:

 .id { display: none; }

...

 <tr><td class="id">cell-8958</td><td>..<td><td class="delete">Delete me</td></tr>

...

 $('.delete').click(function(){ thisid = $(this).parent().find('td.id').text(); dostuff(); });

PS: CSS may be different, not tested in browsers.

a.

+3
source

I think it is better to place id as part of the row id:

 .... <tr id="item_3">...<td>delete tag</td></tr> <tr id="item_4">...<td>delete tag</td></tr> <tr id="item_5">...<td>delete tag</td></tr> ....

And then in jQuery get the id using a simple regular expression.

Update: Or just put it in the rel attribute of the delete / bind button.

Update 2: Since regex can slow down jQuery's performance in this case, try specifying id as the rel attribute for each row.

+6
source

Give each item a unique identifier. The "#" selector works the fastest because it maps to its own javascript method.

+5
source

It would be wise to put it in the <tr> element, because it is the element that contains all the data / markup associated with this element. If you know in advance that the delete button is the only element that will interact with a unique identifier, it would be a little faster and easier to just add it to the button itself.

+2
source

There are several ways to achieve this.

First try jQuery meta plugin . This allows you to embed JSON data in an element's class attribute. It validates and does not affect classes applied to the element. Your tr might look like this:

 <tr class="some-class {uid:'12345', asMuchDataAsYouLike}">

Alternatively (if you don't mind using HTML5), use the data attribute ( here , here ):

 <tr data-uid="12345">

Note. This will be validated as HTML5 if you use the correct DocType ( <!DOCTYPE html> ).

Edit (usage example):

HTML:

 <tr data-uid="12345"> <td>Some Data</td> <td><button class="delete">Delete</button></td> </tr>

JavaScript:

 $('button.delete').click(function(){ // obviously you'd do something different with the data ;) alert($(this).closest('tr').attr('data-uid')); });
+2
source

You should put it in the form surrounding the delete button:

 <tr>...<td><form action="delete.htm?id=001"><input type="submit">Delete</input></form></td></tr>

I understand that this may seem a bit heavyweight, but it works without javascript, which is always best suited.

+1
source

Not tested, but assuming you are using jQuery 1.3 +

 $(this).closest('tr').attr('id');

It should provide you with the identifier of the row you clicked on (noting that when creating the table you will have to indicate the row with the identifier.

0
source

I would rather use a div layout instead of a table

-7
source

Source: https://habr.com/ru/post/1300656/

More articles:


All Articles