CODEWITHSUNDEEP
javascripthtmldynamic
myooomyoo
myooomyoo

Reputation: 145

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?

Upvotes: 2

Views: 19517

Answers (2)

Matthew Sant
Matthew Sant

Reputation: 1631

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>

Upvotes: 3

Duvdevan
Duvdevan

Reputation: 158

You've made a few errors in your example:

  1. 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.
  2. You don't need a for loop for this, if I understood what you want.
  3. 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>

Upvotes: 0

Related Questions