javascript - How to dynamically add table rows in HTML table from value of input textbox

The thing here is adding table rows by inputting value on the text box. i.e. If I input 2 on text box and click on submit, it will add two table rows. I've been searching for solutions but I can't seem to find an answer, well for now.

<form align="center" method="GET">
      <input type="text" name="users" id="user_id"><br>
      <input type="submit" id="mysubmit" value="Submit" onClick="addMoreRows()">
</form>

<table id="tbl_id" style="text-align:center" align="center" valign:"top">
      <thead>
        <tr>
        <th>Name</th>
        <th>Score</th>
        <th>Points</th>
        <th>Total</th>
      </tr>
      </thead>
</table>

<script type="text/javascript">
  var rowsAdd = document.getElementById('tbl_id').insertRow();
  var rowsAdded;
  function addMoreRows(){

    rowsAdded = document.getElementById('user_id').value();
    for(int x=0; x<rowsAdded; x++){

      var newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='user_name'></td></tr>";

      newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";

      newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='points'></td></tr>";

      newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='total'></td></tr>";

    }

Where did I go wrong? Or all of the code are totally wrong?

<form align="center" method="GET">
      <input type="text" name="users" id="user_id"><br>
      <input type="submit" id="mysubmit" value="Submit" onClick="addMoreRows()">
</form>

<table id="tbl_id" style="text-align:center" align="center" valign:"top">
      <thead>
        <tr>
        <th>Name</th>
        <th>Score</th>
        <th>Points</th>
        <th>Total</th>
      </tr>
      </thead>
</table>

<script type="text/javascript">
  var rowsAdd = document.getElementById('tbl_id').insertRow();
  var rowsAdded;
  function addMoreRows(){

    rowsAdded = document.getElementById('user_id').value();
    for(int x=0; x<rowsAdded; x++){

      var newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='user_name'></td></tr>";

      newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";

      newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='points'></td></tr>";

      newCell = newRow.insertCell();
      newCell.innerHTML="<tr><td><input type='text' name='total'></td></tr>";

    }

Where did I go wrong? Or all of the code are totally wrong?

Share Improve this question asked Nov 23, 2014 at 11:47 myooomyoo 1452 gold badges6 silver badges15 bronze badges

for(int x=0? Try for (var x=0 – RobG Commented Nov 23, 2014 at 12:09
@RobG yeah, it's supposed to be var.. thank you also.. – myooomyoo Commented Nov 23, 2014 at 12:20

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

You have quite a few problems with your current code. First and foremost, after clicking submit you are actually submitting the form so you never get to see the result of the javascript - you need to either replace the submit button with a button tag or add 'return false' to the onClick. In the loop you used int instead of var to initialise the loop. Finally, I think you meant to call 'rowsAdd' 'newRow' and place it inside the loop.

<html>
    <body>

    <form align="center" method="GET">
        <input type="text" name="users" id="user_id"><br>
        <input type="submit" id="mysubmit" value="Submit" onClick="addMoreRows(); return false;">
    </form>

    <table id="tbl_id" style="text-align:center" align="center" valign:"top">
        <thead>
            <tr>
                <th>Name</th>
                <th>Score</th>
                <th>Points</th>
                <th>Total</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">

      function addMoreRows() {

        var rowsAdded = document.getElementById('user_id').value;

        for(var x=0; x<rowsAdded; x++) {
          var newRow = document.getElementById('tbl_id').insertRow();

          var newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='user_name'></td></tr>";

          newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";

          newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='points'></td></tr>";

          newCell = newRow.insertCell();
          newCell.innerHTML="<tr><td><input type='text' name='total'></td></tr>";

        }

      }
    </script>

    </body>

</html>

You've made a few errors in your example:

rowsAdded = document.getElementById('user_id').value(); - value() does not exist as a method with in the DOM object, and you will use a property: value instead for all input/select elements.
You don't need a for loop for this, if I understood what you want.
valign:"top" is not a valid attribute on a table element, use valign="top" instead.

This is the code which will do what You want to achive:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>table insert/row-cell</title>
<script type="text/javascript">
  function addMoreRows() {
    var user = document.getElementById('user_id').value;
    var table = document.getElementById('tbl_id');

    var row = table.insertRow();

    var userName = row.insertCell(0);
    var scores = row.insertCell(1);
    var points = row.insertCell(2);
    var total = row.insertCell(3);

    userName.innerHTML = user;
    scores.innerHTML = '1';
    points.innerHTML = '2';
    total.innerHTML = (scores.innerHTML + points.innerHTML).toString();
  }
</script>
</head>

<body>
<form align="center" method="GET">
      <input type="text" name="users" id="user_id"><br>
      <input type="button" id="mysubmit" value="Submit" onClick="addMoreRows()">
</form>

<table id="tbl_id" style="text-align:center" align="center" valign="top">
      <thead>
        <tr>
        <th>Name</th>
        <th>Score</th>
        <th>Points</th>
        <th>Total</th>
      </tr>
      </thead>
      <tbody>

      </tbody>
</table>
</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to dynamically add table rows in HTML table from value of input textbox - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)