Post
Ask Question
Mas

Mas

  • NA
  • 478
  • 70.8k

How to create the lable

Feb 11 2020 7:06 AM
Hello Members,
 
By click event, I am trying to create a label and text box, But it is opening both textboxes..
 
Here is the code.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Dynamically Add Remove Table Rows in JavaScript</title> <style>  
  5. table {  
  6. width: 70%;  
  7. font: 17px Calibri;  
  8. }  
  9. table, th, td {  
  10. border: solid 1px #DDD;  
  11. border-collapse: collapse;  
  12. padding: 2px 3px;  
  13. text-align: center;  
  14. }  
  15. </style>  
  16. </head>  
  17. <body onload="createTable()"> <p>  
  18. <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />  
  19. </p> <!--THE CONTAINER WHERE WE'll ADD THE DYNAMIC TABLE-->  
  20. <div id="cont"></div> <p><input type="button" id="bt" value="Submit Data" onclick="submit()" /></p></body><script>  
  21. // ARRAY FOR HEADER.  
  22. var arrHead = new Array();  
  23. arrHead = ['', 'Emp. Name', 'Designation', 'Age']; // SIMPLY ADD OR REMOVE VALUES IN THE ARRAY FOR TABLE HEADERS. // FIRST CREATE A TABLE STRUCTURE BY ADDING A FEW HEADERS AND  
  24. // ADD THE TABLE TO YOUR WEB PAGE.  
  25. function createTable() {  
  26. var empTable = document.createElement('table');  
  27. empTable.setAttribute('id', 'empTable'); // SET THE TABLE ID. var tr = empTable.insertRow(-1); for (var h = 0; h < arrHead.length; h++) {  
  28. var th = document.createElement('th'); // TABLE HEADER.  
  29. th.innerHTML = arrHead[h];  
  30. tr.appendChild(th);  
  31. } var div = document.getElementById('cont');  
  32. div.appendChild(empTable); // ADD THE TABLE TO YOUR WEB PAGE.  
  33. } // ADD A NEW ROW TO THE TABLE.s  
  34. function addRow() {  
  35. var empTab = document.getElementById('empTable'); var rowCnt = empTab.rows.length; // GET TABLE ROW COUNT.  
  36. var tr = empTab.insertRow(rowCnt); // TABLE ROW.  
  37. tr = empTab.insertRow(rowCnt); for (var c = 0; c < arrHead.length; c++) {  
  38. var td = document.createElement('td'); // TABLE DEFINITION.  
  39. td = tr.insertCell(c); if (c == 0) { // FIRST COLUMN.  
  40. // ADD A BUTTON.  
  41. var button = document.createElement('input'); // SET INPUT ATTRIBUTE.  
  42. button.setAttribute('type', 'button');  
  43. button.setAttribute('value', 'Remove'); // ADD THE BUTTON's 'onclick' EVENT.  
  44. button.setAttribute('onclick', 'removeRow(this)'); td.appendChild(button);  
  45. }  
  46. else {  
  47. // CREATE AND ADD TEXTBOX IN EACH CELL.  
  48. var ele = document.createElement('input');  
  49. ele.setAttribute('type', 'text');  
  50. ele.setAttribute('value', ''); td.appendChild(ele);  
  51. }  
  52. }  
  53. } // DELETE TABLE ROW.  
  54. function removeRow(oButton) {  
  55. var empTab = document.getElementById('empTable');  
  56. empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // BUTTON -> TD -> TR.  
  57. } // EXTRACT AND SUBMIT TABLE DATA.  
  58. function submit() {  
  59. var myTab = document.getElementById('empTable');  
  60. var values = new Array(); // LOOP THROUGH EACH ROW OF THE TABLE.  
  61. for (row = 1; row < myTab.rows.length - 1; row++) {  
  62. for (c = 0; c < myTab.rows[row].cells.length; c++) { // EACH CELL IN A ROW. var element = myTab.rows.item(row).cells[c];  
  63. if (element.childNodes[0].getAttribute('type') == 'text') {  
  64. values.push("'" + element.childNodes[0].value + "'");  
  65. }  
  66. }  
  67. } // SHOW THE RESULT IN THE CONSOLE WINDOW.  
  68. console.log(values);  
  69. }  
  70. </script>  
  71. </html>  
Can any one guide me here!
 
Thank you in advance!!

Answers (1)