[RESOLVED]Iterate HTML table get selected row price using JQUERY

Hi members,

Here i would like know, how to get the selected row value of the html table which is wrapped inside the div tag.  Please have a look at the following html code

<div id="showdiv17" style="display: block;">
 <table id="tbl_PC" width="100%" runat="server" style="Margin-Top:10px;Margin-Botton:10px">
 <tbody>
   <tr>
    <td><input type="radio" name="example_1109" checked="True"></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$42.25</td>
 </tr>
 </tbody>
</table>
</div>

The preceding HTML table is the sample one, here i need the price value (4th column) of the selected row. Can someone give the way to get the value.

You can use the below code

 <script>
   $( document ).ready(function() {
     $('input[type=radio]').click(function() {
       //Get the last row value
       var thirdrowval = $(this).parent().siblings('td').eq(2).text();
       alert(thirdrowval);
     });
  });
  </script>

Complete Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <script>
   $( document ).ready(function() {
     $('input[type=radio]').click(function() {
       //Get the last row value
       var thirdrowval = $(this).parent().siblings('td').eq(2).text();
       alert(thirdrowval);
     });
  });
  </script>
</head>
<body>
<div id="showdiv17" style="display: block;">
 <table id="tbl_PC" width="100%" runat="server" style="Margin-Top:10px;Margin-Botton:10px">
 <tbody>
   <tr>
    <td><input type="radio" name="example_1109" ></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$42.25</td>
 </tr>
    <tr>
    <td><input type="radio" name="example_1109" ></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$43.25</td>
 </tr>
    <tr>
    <td><input type="radio" name="example_1109" ></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$44.25</td>
 </tr>
 </tbody>
</table>
</div>
</body>
</html>

Hi A2H,

Thanks for Quick response.

Could you please do me a favor, actually i need the price value only on the button click, when it is triggered from outside the div tag.

nagarajasia

Could you please do me a favor, actually i need the price value only on the button click, when it is triggered from outside the div tag.

You can use the below code

 <script>
          $(document).ready(function () {
              //Attach button clicke event hanlder
              $('#button1').click(function () {
              //Loop through each radiobutton in table
                  $("table tr td input[type=radio]").each(function () {
                  //Check fi radio butto nis checked or not
                      if ($(this).is(":checked")) {
                      //if checked then get the value
                          var thirdrowval = $(this).parent().siblings('td').eq(2).text();
                          alert(thirdrowval);
                      }
                  });
              });
          });
      </script>

Complete Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
   <script>
          $(document).ready(function () {
              //Attach button clicke event hanlder
              $('#button1').click(function () {
              //Loop through each radiobutton in table
                  $("table tr td input[type=radio]").each(function () {
                  //Check fi radio butto nis checked or not
                      if ($(this).is(":checked")) {
                      //if checked then get the value
                          var thirdrowval = $(this).parent().siblings('td').eq(2).text();
                          alert(thirdrowval);
                      }
                  });
              });
          });
      </script>
</head>
<body>
<div id="showdiv17" style="display: block;">
 <table id="tbl_PC" width="100%" runat="server" style="Margin-Top:10px;Margin-Botton:10px">
 <tbody>
   <tr>
    <td><input type="radio" name="example_1109" ></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$42.25</td>
 </tr>
    <tr>
    <td><input type="radio" name="example_1109" ></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$43.25</td>
 </tr>
    <tr>
    <td><input type="radio" name="example_1109" ></td>
    <td width="30%">KR-21</td>
    <td width="50%">Adjustable height range: 2.25"</td>
    <td width="20%">$44.25</td>
 </tr>
 </tbody>
</table>
  <input type="button" Value="GetValue" id="button1"/>
</div>
</body>
</html>

@A2H, Thank you very much. It worked well.

nagarajasia

@A2H, Thank you very much. It worked well.

Glad to be of help

Leave a Reply