Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

How To Create Dynamic Row With Input Fields In Html Table From Given Row

Post a Comment
Im new for Html and javascript. I want to create dynamic row with input fields in table while click button,that number of row given from user. In my code, row created dynamically b

Solution 1:

Use Element.appendChild instead of innerHTML

  • Element.firstChild will return first-child of the element.
  • querySelectorAll will return NodeList as per the specified selector.
  • Element.appendChild will append new Node in the Element without affecting existing content in the Element. 

functioncreateTable() {
  var a = document.getElementById('tb1').value;
  if (a == "") {
    alert("Please enter some numeric value");
  } else {
    var th = document.querySelectorAll('#table th');//To check whether `TD` is appended in table or not!if (!th.length) {
      //If not appended, then append TD in tablevar rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
      var table = document.createElement('table');
      table.innerHTML = rows;
      document.getElementById("table").appendChild(table.firstChild);
    }

    for (var i = 0; i < a; i++) {
      var elems = '';
      elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i + 1) + "'></td></tr>";
      var table = document.createElement('table');
      table.innerHTML = elems;
      document.getElementById("table").appendChild(table.firstChild);
    }
  }
}
div {
  background: red;
  margin: 5px;
}
table {
  border: 2px solid black;
}
td {
  padding: 10px;
  border: 1px solid lightgrey;
}
<inputtype="text"id="tb1" /><buttontype="button"onclick='createTable()'>Click Me!</button><tableid="table"class="order-table table"name="table1"required></table>

Solution 2:

What you did was setting new value to the table each time. what you actually would like to do is appending data to the table using "appendChild" function. this can also be created, even more easily, using

here is a working fiddle with the change (using js appendChild):

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div {
            background: red;
            margin: 5px;
        }

        table {
            border: 2px solid black;
        }

        td {
            padding: 10px;
            border: 1px solid lightgrey;
        }

    </style><script>

        function createTable() {
            var a;

            a = document.getElementById('tb1').value;

            if (a == "") {
                alert("Please enter some numeric value");
            } else {
                var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
                for (var i = 0; i < a; i++) {
                let tr = document.createElement("tr");
                tr.innerHTML = "<td><inputtype='text'name='" + "name".concat(i+1) + "'></td><td><inputtype='text'name='" + "quantity".concat(i+1) + "'></td><td><inputtype='text'name='" + "qtype".concat(i+1) + "'></td><tdid='amt'><inputtype='text'id='sum'onkeyup='myfunction(this.value);'name='" + "total".concat(i+1) + "'></td>";
                document.getElementById("table").appendChild(tr);
                }                
            }
        }
    </script></head><body><inputtype="text"id="tb1"/><buttontype="button"onclick='createTable()'>Click Me!</button><tableid="table"class="order-table table"name="table1"required></table></body></html>

i would recommend learning to use jquery. anyway, here is some info about the functions i mentioned: jquery and their "append" function.

info about js appendChild - http://www.w3schools.com/jsref/met_node_appendchild.asp jquery append - http://api.jquery.com/append/

Solution 3:

First of all You are missing <tr></tr> in wrapping the th, wrap the th in tr, and for new rows to append the previous row you have to use the insertRow porperty of javascript.

Here is your modified snippet

Thanks

<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title></title><style>div {
            background: red;
            margin: 5px;
        }

        table {
            border: 2px solid black;
        }

        td {
            padding: 10px;
            border: 1px solid lightgrey;
        }

    </style><script>

        function createTable() {
            var a;

            a = document.getElementById('tb1').value;
var length = document.getElementById('table').rows.length;
            if (a == "") {
                alert("Please enter some numeric value");
            } else {
              if(length > 1){
                
                var table = document.getElementById("table");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(length);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
                cell1.innerHTML = "<inputtype='text'name='" + "name".concat(length+1) + "'>";
                 cell2.innerHTML = "<inputtype='text'name='" + "name".concat(length+1) + "'>";
                 cell3.innerHTML = "<inputtype='text'name='" + "name".concat(length+1) + "'>";
                 cell4.innerHTML = "<inputtype='text'name='" + "name".concat(length+1) + "'>";
              } else {
                var rows = "<tr><th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th></tr>";
                for (var i = 0; i < a; i++) {
                    rows += "<tr><td><inputtype='text'name='" + "name".concat(i+1) + "'></td><td><inputtype='text'name='" + "quantity".concat(i+1) + "'></td><td><inputtype='text'name='" + "qtype".concat(i+1) + "'></td><tdid='amt'><inputtype='text'id='sum'onkeyup='myfunction(this.value);'name='" + "total".concat(i+1) + "'></td></tr>";
                }

                document.getElementById("table").innerHTML = rows;
                }

            }
        }
    </script></head><body><inputtype="text"id="tb1"/><buttontype="button"onclick='createTable()'>Click Me!</button><tableid="table"class="order-table table"name="table1"required></table></body></html>

Post a Comment for "How To Create Dynamic Row With Input Fields In Html Table From Given Row"