Post
Ask Question

HTML Table Dynamic Row with Radio Buttons

  1. <button id = "btn">add </button>  
  2. <table id = "tbl" border = "1" width = "100%">  
  3.     <thead>  
  4.         <tr>  
  5.             <th>Name</th>  
  6.             <th>Gender</th>  
  7.         </tr>  
  8.     </thead>  
  9. </table> 
  1. $(document).ready(function()  
  2. {  
  3. $('#btn').click(function()  
  4. {  
  5. var tbl = document.getElementById('tbl');  
  6. var rowsCount = tbl.rows.length;  
  7. var row = tbl.insertRow(rowsCount);  
  8. var cell1 = row.insertCell(0);  
  9. cell1.innerText = "Name";  
  10. var cell2 = row.insertCell(1);  
  11. var r1 = document.createElement('input');  
  12. r1.type = "radio";  
  13. r1.name = "gender" + rowsCount;  
  14. r1.id = "male" + rowsCount;  
  15. var lbl1 = document.createElement('label');  
  16. lbl1.innerText = "Male";  
  17. lbl1.htmlFor = r1.id;  
  18. cell2.appendChild(r1);  
  19. cell2.appendChild(lbl1);  
  20. var r2 = document.createElement('input');  
  21. r2.type = "radio";  
  22. r2.name = "gender" + rowsCount;  
  23. r2.id = "female" + rowsCount;  
  24. var lbl2 = document.createElement('label');  
  25. lbl2.innerText = "Female";  
  26. lbl2.htmlFor = r2.id;  
  27. cell2.appendChild(r2);  
  28. cell2.appendChild(lbl2);  
  29. });  
  30. });  
https://jsfiddle.net/hariharasudhan_c/rv3d96r4/1/