JAVASCRIPT/JQUERY GET THE VALUE OF THE FIRST ROW

Question

I'm trying to get the first value of the row in my html table when I click in each delete button...

The table is populated from SQL database...

the image below!

I will put only the necessary code:

enter image description here

HTML Button:

<button type="button" class="btn btn-danger btn_delete" id="btn_delete" onclick="delete_function()">Delete</button>

Javascript Code:

<script type="text/javascript">
    function delete_function() {
        var id = $('#clients tbody').find('td:first').text();
        alert(id);      
    }
</script>

If I click in any button I always receive the alert with same result:

114

How I can get the same id number value that exist in the same line of the button clicked??? I accept Javascript and Jquery advices

Additionally, if you are outputing this info from a server side language, just include the id on the button with `data-id=114` and then you can easily get it with `$('.btn_delete').data('id')` — Leeish, Jun 16 '15 at 20:11

Royi Namir · Accepted Answer · 2015-06-16T20:09:21.777

2

Change your code to :

<button type="button" class="btn btn-danger btn_delete" id="btn_delete" onclick="delete_function(this)">Delete</button>

Use first-child

<script type="text/javascript">
    function delete_function(obj) {
        var id = $(obj).closest('tr').find('td:first-child').text();
        alert(id);      
    }
</script>

One thing to mention : you should not use onclick in the html :

$(".btn_delete").on('click',function (){
  var id = $(this).closest('tr').find('td:first-child').text();
  alert(id); 

});

edited Jun 16 '15 at 20:09

answered Jun 16 '15 at 20:05

Royi Namir

144,742
138
468
792

2

I think it will still always return the same value. He's getting the first child of the parent element. He needs to traverse from the button up. – Leeish Jun 16 '15 at 20:06
@Leeish no . you send `this` in `delete_function(this)` – Royi Namir Jun 16 '15 at 20:07
That's not what your code was initially. Your initial answer resulted in 114 each time as well. – Leeish Jun 16 '15 at 20:10
@Leeish Edited right about seconds after posting the first answer . I dont see a problem. – Royi Namir Jun 16 '15 at 20:11

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

$('.btn_delete').click(function(){
    var id = $(this).parents('tr').find('td:first-child').text();
    alert(id);
}

onClick is always a bad idea.

jQuery.click() vs onClick

Why is using onClick() in HTML a bad practice?

edited May 23 '17 at 12:33

Community

1
1

answered Jun 16 '15 at 20:08

Leeish

5,203
2
17
45

1

I suggest you to use `closest` rather than `parents` – Royi Namir Jun 16 '15 at 20:13
Why? Is there a problem? It skips the self-check. – Leeish Jun 16 '15 at 20:14
YES . there is a problem : `parents` :Travels up the DOM tree to the document’s root element, adding each ancestor element to a temporary collection; it **then** filters that collection based on a selector if one is supplied. closest doesnt do it. it travels up the DOM tree until it finds a match for the supplied selector – Royi Namir Jun 16 '15 at 20:15
Ah I didn't know that and was just reading up on it to see if it was headed towards depreciation or something. – Leeish Jun 16 '15 at 20:16
No need for deprecations. they do the _same_ thing. but the way they do it is different. – Royi Namir Jun 16 '15 at 20:17
Right, I was checking because you said to use closest. I thought it might be depreciated. I thought it headed up the DOM to the first one it finds, apparently like closest does. I didn't know that. I thought closest looked downward and not just upward too. – Leeish Jun 16 '15 at 20:18

score 0 · Answer 3 · answered Jun 16 '15 at 20:11

0

There's many ways you can go about doing this, but one way would be to set the id directly on the button itself so you don't have to traverse the DOM to get it.

<button class="delete" data-id="114">Delete</button>

Then, in your JavaScript

$('button.delete').on('click', function( e ) {
    console.log($(this).data('id'));
});

answered Jun 16 '15 at 20:11

chazsolo

7,873
1
20
44

That doesn't answer the question. The question wasn't how can I change my HTML to get the data, it was how do I get the data from a cell. Hence the down vote. Doesn't answer the question. – Leeish Jun 16 '15 at 20:13
@Leeish yet you suggested it in a comment? – chazsolo Jun 16 '15 at 20:15
Correct. Not as an answer. – Leeish Jun 16 '15 at 20:15

score 0 · Answer 4 · answered Jun 16 '15 at 20:11

You always get the same result because you are always getting the same element. To get the value related to the button that you pressed, you need to involve the button when you locate the element.

As you are using jQuery, you can use it to bind the events also. Remove the onclick attribute from the HTML

<button type="button" class="btn btn-danger btn_delete" id="btn_delete">Delete</button>

In the event handler you use the button that was clicked (this) to locate the first cell in the same row:

$(document).ready(function(){

  $('#clients .btn_delete').click(function() {
    var id = $(this).closest('tr').find('td:first').text();
    alert(id);      
  }

});

JAVASCRIPT/JQUERY GET THE VALUE OF THE FIRST ROW

4 Answers4