Question

139

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

rated 0 times [ 144] [ 5] / answers: 1 / hits: 15720 / 10 Years ago, sun, november 23, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dusty

Add To Favorites

Follow

Total Points: 739

Total Questions: 97

Total Answers: 85

Location: Angola

Member since Wed, Apr 13, 2022

2 Years ago

dusty questions

1 js fetch post works, but php is empty

Mon, Dec 14, 20, 00:00, 4 Years ago

1 Nested function component ReactJS

Mon, Mar 23, 20, 00:00, 4 Years ago

1 React Native - How do we know what child element is contained by parent?

Mon, Mar 16, 20, 00:00, 4 Years ago

1 Postman : How to assert all array elements exist in other array?

Fri, Jul 12, 19, 00:00, 5 Years ago

1 How to fix this error Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'div.com[min=]' is not a valid selector?

Thu, Jun 13, 19, 00:00, 5 Years ago

View All

answered 10 Years ago brianaclaras · Accepted Answer

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>