How To Get A Value Of Elements Of A Row Of Table When Radio Button Is Selected

I have a JSP page in which i am dynamically creating a table based on the query from database.I have a radio button as my first column for each row. I want that on click of particu

Solution 1:

Add a click handler to the radio button, probably using a delegated handler rooted on the table. In the handler, this will refer to the button, and so you can access its parent (or ancestor) row. E.g.:

$("selector-for-the-table").on("click", "input[type=radio]", function() {
    var row = $(this).closest("tr");
    // ...
});

If you want to get information from the other elements in that same row, you can use row.find to find them within the row.

See Direct and Delegated Events in the on documentation for more about delegated handlers, and various other parts of the on documentation for how this is determined, etc.

Example:

$("#the-table").on("click", "input[type=radio]", function() {
  var row = $(this).closest("tr");
  alert(row.find("input").not(this).map(function() {
    return this.value;
  }).get().join(", "));
});
var counter = 0;
addRow();
function addRow() {
  $("#the-table tbody").append(
    "<tr>" +
      "<td><input type=radio></td>" +
      "<td><input type=text value=" + counter + "></td>" +
      "<td><input type=text value=" + (counter * 10) + "></td>" +
    "</tr>"
  );
  if (++counter < 10) {
    setTimeout(addRow, 500);
  }
}

<table id="the-table">
  <tbody>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>