CODEWITHSUNDEEP
javascripthtmljquery
Agusto Nice
Agusto Nice

Reputation: 1

how to get value in <td>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<tr>
    <td class='type'> Type name </td>
    <td class='number'> 102030 </td>
    <td class='software'> 1.0-Alpha </td>
    <td ><button class='btnSelect'>Order</button>
</tr>
<script>
    $(".btnSelect").on('click',function() {
        var tdNumber = $(this).find('.number').html();
        var data = $(this).find('.number').html();
        alert(data);
    })
</script>

If I clicked order button show error undefined , what wrong ?

Thanks

Upvotes: 0

Views: 93

Answers (3)

Kiran Shahi
Kiran Shahi

Reputation: 7980

Basically you have few mistake in your html dom.

<tr>
    <td class='type'> Type name </td>
    <td class='number'> 102030 </td>
    <td class='software'> 1.0-Alpha </td>
    <td><button class='btnSelect'>Order</button>
</tr>

button is not wrapped with td and tr is not wrapped with table and in your jQuery 

$(".btnSelect").on('click', function() {
    var tdNumber = $(this).find('.number').html();
    var data = $(this).find('.number').html();
    alert(data);
});

there is event on button which is inside the tr, note that you can do find from child to parent. i.e. $(this).find('.number').html(); here $(this) is the object of clicked button and you are searching the siblings of the parent i.e. tr you can review the following example which is written based on your code that you have provided.

$(".btnSelect").on('click', function() {
    var data = $(this).parent().siblings('.number').text();
    alert(data);
})
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
    <tr>
        <td class='type'> Type name </td>
        <td class='number'> 102030 </td>
        <td class='software'> 1.0-Alpha </td>
        <td><button class='btnSelect'>Order</button></td>
    </tr>
</table>

Upvotes: 2

Naveen Roy
Naveen Roy

Reputation: 95

When you want to select any of the element of same tree you must go to root and then find it.

in html dom element to go to root you have to use closest() function and for find from root you have to use find() function

use this

$(".btnSelect").on('click',function(){
    var tdNumber = $(this).closest('tr').find('.number').html();
    var data = $(this).closest('tr').find('.number').html();
    alert(data);
});

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: close the </td> tag in <td ><button class='btnSelect'>Order</button>

2nd: you need to use .closest('tr').find

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
<tr>
    <td class='type'> Type name </td>
    <td class='number'> 102030 </td>
    <td class='software'> 1.0-Alpha </td>
    <td ><button class='btnSelect'>Order</button></td>
</tr>
</table>
<script>
$(document).ready(function(){ // you may need to use document ready
    $(".btnSelect").on('click',function(){
      var data = $(this).closest('tr').find('.number').html();
      alert(data);
    });
});
</script>

Upvotes: 3

Related Questions