hikoo hikoo - 5 months ago 18
HTML Question

how to create dynamic row with input fields in html table from given row

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 but its not append prevoius one. Its created freshly. But ,I want to append row if table already created.

Here my code:



<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="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++) {
rows += "<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>";
}

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

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





Please anyone help!

Thanks in advance..

Answer

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.

function createTable() {
  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 table
      var 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;
}
<input type="text" id="tb1" />
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table" name="table1" required>
</table>

Comments