How to show information of a dynamically populated table into a popup?

Question

I have a table which is populated like this

      $(document).ready(function (e) {
      var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] }
         $.each(t.Qty, function (i, ele) {
           $("#content").append("<tr><td><input type='radio' /></td><td>"+parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
    })
})

and its html code

  <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js">          </script>
     <table>
        <thead>
           <tr>
              <th>Select </th>
              <th>Qty</th>
               <th>Name</th>
       </tr>
</thead>
<tbody id="content">
</tbody>

I have to show the table information ie name and qty in a popup whichever radio button is clicked.I am new to jquery.Any help would be appreciated.

Answer 1

You could easy bind on change state of radio buttons in table with:

$('#content').on('change', 'input[type="radio"]', function(){ /*code*/ });

and inside of it check is this radio checked?

if ($(this).is(':checked')) { /* code */ }

To get text from table, you have to select parent tr of input radio that is clicked, and inside of that tr you got, you have to search tds, with jquery .find('td:eq(NUMBER_OF_TD)') . TD elements starts from zero (0).

 $(document).ready(function (e) { var t = { Qty: [61.0, 0.0, 8.0], Name: ["2009 A", "2009 B", "2009 C "] } $.each(t.Qty, function (i, ele) { $("#content").append("<tr><td><input type='radio' /></td><td>"+parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>"); }) $('#content').on('change', 'input[type="radio"]', function(){ if ($(this).is(':checked')) { var table_Name = $(this).parents('tr').find('td:eq(2)').text(); var table_Quantity = $(this).parents('tr').find('td:eq(1)').text(); alert("Name: "+table_Name+" & Quantity: "+table_Quantity); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"> </script> <table> <thead> <tr> <th>Select </th> <th>Qty</th> <th>Name</th> </tr> </thead> <tbody id="content"> </tbody> 

Answer 2

Try this. It uses jquery ui to show popup window

your HTML code

<table>
    <thead>
        <tr>
            <th>Select </th>
            <th>Qty</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody id="content">
    </tbody>
</table>

<div id='popup' style='display: none;'>
    <table>
      <tr>
        <td>Qty</td><td><label id='lblQty'></label></td>
      </tr>
      <tr>
        <td>Name</td><td><label id='lblName'></label></td>
      </tr>
    </table>
</div>

and javascript

$(document).ready(function(e) {
  var t = {
    Qty: [61.0, 0.0, 8.0],
    Name: ["2009 A", "2009 B", "2009 C "]
  }
  $.each(t.Qty, function(i, ele) {
    $("#content").append("<tr><td><input type='radio' name='my_radio' ind='"+i+"' /></td><td>" + parseFloat(t.Qty[i]).toFixed(1) + "</td><td>" + t.Name[i] + "</td></tr>");
  });
  $('#content [type=radio]').click(function open_popup(e){
    $('#popup').dialog({
        open: function(){
        $(this).find('#lblQty').text(parseFloat(t.Qty[$(e.currentTarget).attr('ind')]).toFixed(1));
        $(this).find('#lblName').text(t.Name[$(e.currentTarget).attr('ind')]);
      }
    });
  });

});

This is the working fiddle https://jsfiddle.net/Lurofvzn/