Display a row when clicked in jQuery

Question

I want to get the Addmission id field in a separate function. When the user clicks on a button.

   $(document).ready(function () {
       $.each(data.student, function (i, item){
           trHTML += '<tr>'+
           '<td>'+data.student[i]['admission_no']+'</td>' +
           '<td>'+ data.student[i]['fullname']+'</td>' +
           '<td>'+data.student[i]['gender']+ '</td>' +
           '<td>'+data.student[i]['dob']+'</td>' +
           '<td>'+data.student[i]['class_no']+data.student[i]     ['class_id']+'</td>'+
           '<td><button id="selectStu" name="selectStu" ' +
           'value="'+data.student[i]['admission_no']+'">View</button>   </td>'+
           '<td></td>
           </tr>';
       });

//i get the table.
//1000  Name1 Male  2A  View
//1001  Name2 Male  2A  View
//1002  Name3 Male  2A  View



      $('#location').html(trHTML);
      $('#showByClass').show();

      $('#selectStu').click(function (e){
          e.preventDefault();
          //I need to get clicked "data.student[i]['admission_no']" Here
      });
  });

//Here Is my data Array,

{"student":[{"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1000","class_id":"A","class_no":"2"}, {"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1001","class_id":"A","class_no":"2"}, {"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1003","class_id":"A","class_no":"2"}, {"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1005","class_id":"A","class_no":"2"}]}

Answer 1

you can use $(this).val() to get the clicked button value like this

note :

1) you could use class .selectStu instead of id #selectStu

2) There was error in you each loop . you should pass the first index like this data[0]["student"]

 $(document).ready(function () { var data = [{"student":[{"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1000","class_id":"A","class_no":"2"}, {"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1001","class_id":"A","class_no":"2"}, {"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1003","class_id":"A","class_no":"2"}, {"fullname":"dfsdf fdsfsdfsf","gender":"Male","dob":"2017-01-18","admission_no":"1005","class_id":"A","class_no":"2"}]}]; var trHTML =""; $.each(data[0]["student"], function (i, item){ trHTML += '<tr>'+ '<td>'+item['admission_no']+'</td>' + '<td>'+ item['fullname']+'</td>' + '<td>'+ item['gender']+ '</td>' + '<td>'+ item['dob']+'</td>' + '<td>'+ item['class_no']+item['class_id']+'</td>'+ '<td><button name="selectStu" class="selectStu" ' + 'value="'+item['admission_no']+'">View</button> </td>'+ '</tr>'; }); $('tbody').html(trHTML); // $('#showByClass').show(); $('.selectStu').click(function (e) { e.preventDefault(); alert($(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1px" > <thead> <tr> <th>Adm.No</th><th>F.name</th><th>gender</th><th>dob</th><th>class</th><th>action</th> </tr> <thead> <tbody > </tbody> </table>