CODEWITHSUNDEEP
javascriptjqueryhtmljson
Shreya Rawal
Shreya Rawal

Reputation: 182

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

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 i.e name and qty in a popup whichever radio button is clicked.I am new to jquery.Any help would be appreciated.

Upvotes: 1

Views: 59

Answers (2)

user1080381
user1080381

Reputation: 1786

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/

Upvotes: 1

Ultrazz008
Ultrazz008

Reputation: 1688

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>

Upvotes: 2

Related Questions