javascript - 如何将动态填充表格的信息显示到弹出窗口中？

Question

我有一个这样填充的表

      $(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>");
    })
})

及其html代码

  <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>

无论单击哪个单选按钮，我都必须在弹出窗口中显示表格信息，即名称和数量。我是 jquery 的新手。我们将不胜感激。

Answer 1

您可以轻松绑定(bind)表中单选按钮的更改状态:

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

在里面检查这个 radio 是否经过检查？

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

要从表格中获取文本，您必须选择被单击的输入 radio 的父 tr，并且在您获得的那个 tr 中，您必须使用 jquery .find 搜索 tds ('td:eq(NUMBER_OF_TD)') 。TD 元素从零 (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>