Question

Can you any please help me on this. I have a master table [item_attr] with radio button & text box where I can add more line items and delete them also.

But when I select a row item child table [item_attr_values] has to display with child values.

I have implemented add/del rows using jQuery but I am not to display the child table on radio selection. Here is the code:

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

Please take a look at this one

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

You can use .clone() to get new copies of existing elements.

Edit

To fire a click event for the radio buttons, give them a class name and then use .live() to attach a click event to those elements. Something like

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