How to find which item of table is selected?

Question

I have a table like this in my UI.

<table>
   <thead>
     <tr>
        <th>DELETE</th>
        <th>EDIT</th>
        <th>No</th>  
        <th>Name</th>     
     </tr>
   </thead>
   <tbody id="bodyTable">
          {% for item in person_list %}
          <tr>
          <td>
              <a href="#">
              Delete
              </a>
          </td>
          <td>
             <a href="">
              EDIT
             </a>
          </td>
          <td>{{item.person_no}}</td>
          <td>{{item.person_name}}</td>
       </tr>
</tbody>
</table>

and there is to option "EDIT" and "DELETE" for my tables items. and I want to know how to find with an item that is clicked for DELETE or EDIT? that item should be removed from database or edited, so i need find which item is clicked and send that id to my views.

@Selcuk I don't want to go another page! I want when the user clicked on delete, for example, delete that object from the database.and stay in show table page — Saeed Ramezani, Sep 05 '19 at 04:45
Then use ajax, but the logic to generate the URL is the same. — Selcuk, Sep 05 '19 at 04:55
@Selcuk can you explain more about your first comment?i have a function with name 'Person' in views.py and my locals url is like this: localhost:8000/person — Saeed Ramezani, Sep 05 '19 at 04:58
This is too broad to be explained as a comment, but start by searching for Django and ajax on StackOverflow. — Selcuk, Sep 05 '19 at 05:03

score 0 · Answer 1 · answered Sep 10 '19 at 12:10

First of all, this requires JavaScript. Any time you want a click to do something more than load a new page, you're going to be dealing with JS.

Secondly, putting JS directly in your HTML is poor security practice. So something like href="removeItem({{item.id}})" will mean you cannot use a Content Security Policy and will thus mean you need to take extra steps to avoid injection and cross-site scripting attacks. You should be sure you're using a CSP so you know exactly what's running on your site.

Thirdly, links are for going to other pages, not for doing things on the current page. It's best to use a div or a button for that sort of action, otherwise you have to take other steps to suppress the link behavior. (You will need to do some CSS styling to get the div to look clickable.)

The right solution is to put the JS in a separate file and then add a handler on the link in question. You code would look something like this:

js/items.js

// Runs on page load
$(function() {
    $('.delete-item').on('click.myitems', confirmDeleteItem);
    $('.edit-item').on('click.myitems', editItem);
});

function editItem(e) {
    let item_id = parseInt($(e.target).closest('tr').attr('data-item-id'), 10);
    // Do something with your item ID.
}

function confirmDeleteItem(e) {
    let item_id = parseInt($(e.target).closest('tr').attr('data-item-id'), 10);

    if (confirm('Do you really want to delete "' + item_id + '"?')) {
        // Do it!
    }
}

items.html (Jinja template)

{% for item in person_list %}
<tr data-item-id="{{item.id}}">
    <div class="delete-item">Delete</div>
    <div class="edit-item">Edit</div>
</tr>
{% endfor %}

<script src="{{ url_for('static', filename='js/items.js') }}"></script>

How to find which item of table is selected?

1 Answers1