jquery - 在单选选择中显示 HTML 表格

Question

你能帮我解决这个问题吗？我有一个带有单选按钮和文本框的主表 [item_attr]，我可以在其中添加更多行项目并删除它们。

但是当我选择一个行项目时，子表 [item_attr_values] 必须显示子值。

我已经使用 jQuery 实现了添加/删除行，但我不会在单选选择中显示子表。这是代码:

 $(document).ready(function(){
 var counter = 2;
 $("#addButton").click(function () {
     var itemAttr = $("#TextBoxDiv1");
     var newDiv = itemAttr.clone().appendTo(itemAttr.parent()).attr("id", 
 'TextBoxDiv' + counter);
     counter++;
 });

 $("#removeButton").click(function () {
  if(counter==1){
      alert("No more textbox to remove");
      return false;
   }   
   counter--;
     $("#TextBoxDiv" + counter).remove();
  });
 });
 </script>  

 <form>
 <div id='TextBoxesGroup'>
   <div id="TextBoxDiv1">
      <input type="radio" name="radio" value="" >
       <input type='textbox' id='textbox1' value="Ticket height" >
   </div>
 </div>
  <input type='button' value='Add Item Attribute' id='addButton'>
  <input type='button' value='Edit Item Attribute' id='editButton'>
  <input type='button' value='Remove Item Attribute' id='removeButton'>
 </form>

Answer 1

请看这个

http://jsfiddle.net/Z4sVW/4/

您可以使用 .clone()获取现有元素的新副本。

编辑

要触发单选按钮的点击事件，给它们一个类名，然后使用 .live()将点击事件附加到这些元素。有点像

$("input:radio.classname").live("click", function(){
   // your code to show child table
};