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

前端未结

关注

 3  1485

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 dynami

相关标签:

3条回答

太阳男子

2021-01-17 07:01

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>

0 讨论(0)

小鲜肉

2021-01-17 07:11

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>
<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;
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 = "<input type='text' name='" + "name".concat(length+1) + "'>";
                 cell2.innerHTML = "<input type='text' name='" + "name".concat(length+1) + "'>";
                 cell3.innerHTML = "<input type='text' name='" + "name".concat(length+1) + "'>";
                 cell4.innerHTML = "<input type='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><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>

0 讨论(0)

借酒劲吻你

2021-01-17 07:19

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>
<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++) {
                let tr = document.createElement("tr");
                tr.innerHTML = "<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>";
                document.getElementById("table").appendChild(tr);
                }                
            }
        }
    </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>

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/

0 讨论(0)