How to fetch the selected table tr row in this case

Question

I am having a table as shown below

On click of a button how to fecth the selected tr mobile number

<table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_2" aria-describedby="sample_2_info">
   <tbody role="alert" aria-live="polite" aria-relevant="all">
      <tr class="vendorslist odd">
         <td class=" "><label class="radio"><input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"></label></td>
         <td class=" sorting_1"> VENDOR</td>
         <td class=" ">5300085118</td>
         <td class=" ">544444444</td>
         <td class=" ">Restaurant</td>
         <td class=" ">Restaurants</td>
         <td class=" ">wer@gmail.com</td>
         <td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span></td>
      </tr>
      <tr class="vendorslist odd">
         <td class=" "><label class="radio"><input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"></label></td>
         <td class=" sorting_1"> VENDOR</td>
         <td class=" ">5300085118</td>
         <td class=" ">900000000</td>
         <td class=" ">Restaurant</td>
         <td class=" ">Restaurants</td>
         <td class=" ">serr@gmail.com</td>
         <td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span></td>
      </tr>
   </tbody>
</table>
<button id="btnSave">Save Click</button>

This is my fiddle

https://jsfiddle.net/atg5m6ym/4123/

Could you please let me know how to fecth the mobile number of the selected table tr

Means for first i need the value 544444444 and in case of second i need 900000000

Answer 1

it would be easier with a class on the mobile td , but you could do:-

 $(document).on('click', '#btnSave', function() { var mobile = $('table :checked').closest('tr').find('td:eq(3)').text(); alert(mobile); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-striped table-bordered table-hover table-full-width dataTable" id="sample_2" aria-describedby="sample_2_info"> <tbody role="alert" aria-live="polite" aria-relevant="all"> <tr class="vendorslist odd"> <td class=" "> <label class="radio"> <input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"> </label> </td> <td class=" sorting_1">VENDOR</td> <td class=" ">12222</td> <td class=" ">544444444</td> <td class=" ">Restaurant</td> <td class=" ">Restaurants</td> <td class=" ">wer@gmail.com</td> <td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span> </td> </tr> <tr class="vendorslist odd"> <td class=" "> <label class="radio"> <input type="radio" onclick="UpdateButtonTest(this);" id="5300085118-90304910251387" name="optionsRadios1" value="option1"> </label> </td> <td class=" sorting_1">VENDOR</td> <td class=" ">12233</td> <td class=" ">900000000</td> <td class=" ">Restaurant</td> <td class=" ">Restaurants</td> <td class=" ">serr@gmail.com</td> <td class=" "><span id="span-5300085118-90304910251387" class="label label-success">Active</span> </td> </tr> </tbody> </table> <button id="btnSave">Save Click</button>

Answer 2

Through jQuery parents()

$(document).on('click', '#btnSave', function() {

    alert($('.vendorslist input:checked').parents("tr").find('td').eq(3).text());

});