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

您可以轻松地绑定表中单选按钮的更改状态：

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

并在其内部检查此收音机是否已检查？

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

要从表中获取文本，您必须选择单击的输入无线电的父tr，并且在您获得的内部，您必须使用jquery .find('td:eq(NUMBER_OF_TD)')搜索tds。 TD元素从零（0）开始。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个。它使用jquery ui来显示弹出窗口

您的HTML代码

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

和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')]);
      }
    });
  });

});

这是工作小提琴https://jsfiddle.net/Lurofvzn/

如何将动态填充的表的信息显示为弹出窗口？

2 个答案: