I need a dynamic table where rows must be added user input value in the textbox without using a button

Question

1.00/5 (1 vote)

See more:

i need a dynamic table in html and also a textfield about the table, default value of the table is 1, so initaily when the page is loaded there will be table which contain heading and one row and when user input a numeric value in the textbox then automatically the row increment or decrement based on the value.

What I have tried:

<pre>$(document).ready(function(){

   $('.input').on('keyup', function(){
       $val = $(this).val();
       $('.tbl').find('tr').remove();
      if($.isNumeric($val)==true){
        
        while($val!=0){
            $('.tbl').append("<tr><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr>");
            $val--;
        }
      }
       
   });
    
});



    
    
       
        
    <table class="tbl"></table>

Posted 6-Dec-17 18:09pm

Member 13562560

Updated 7-Dec-17 1:10am

v2

Add a Solution

Comments

Karthik_Mahalingam 7-Dec-17 2:40am

what do you want to display in the rows?
numbers ?

Member 13562560 7-Dec-17 3:15am

in rows just need input field,i need 4 columns in the table sno,name,age,price so initialy when we open the page it contain a textbox and under that a table with all above mentioned heading and also one row(default value of row is 1)when the user input a numeric value in the textbox the row incremented ie if value 2 is entered the no of rows will be 2 then again 1 is entered in the textbox the row decremented into 1.

Karthik_Mahalingam 7-Dec-17 3:17am

ok fine but what will you display inside the rows?

Member 13562560 7-Dec-17 4:18am

inside the row we will enter the details of each person such as name,age,and amt or price.

Karthik_Mahalingam 7-Dec-17 4:44am

so each row will contain textbox?

Member 13562560 7-Dec-17 4:49am

yes,each row has 4 input field for sno,name,age,price .it is just entering values in a table,for that we need inputfield.

Karthik_Mahalingam 7-Dec-17 6:02am

ok.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Patrice T · Answer 1 · 2017-12-06T18:59:00

Solution 1

Quote:
send me the code as soon as possibile

I need to win lotto urgently.
We are not a 'code on order' site, you should try to hire a professional programmer.
Hire Freelancers & Find Freelance Jobs Online - Freelancer[^]

Posted 6-Dec-17 18:59pm

Patrice T

Karthik_Mahalingam · Answer 2 · 2017-12-07T01:10:00

Solution 2

try

<!doctype html>
<html>
<head> 
</head>
<body>
    <input id="txtCount" type="text" value="1"  onchange="generate(this)"/>
    <table id="tbl">
        <thead>
            <tr>
                <th>Column1</th><th>Column2</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <script>
        function generate() {
           var value =  document.getElementById('txtCount').value;
            if (!isNaN(value)) {
                var rows = parseInt(value);
                var trs = [];
                for (var i = 0; i < rows; i++) {
                    trs.push('<tr> <td> <input type="text" /> </td>   <td> <input type="text" /> </td>   </tr> ')
                }
                var tbodyHtml = trs.join('');
                var tbody = document.querySelector('#tbl tbody');

                tbody.innerHTML = tbodyHtml;

            }
        }
        generate();
    </script>


   
</body>
</html>

Posted 7-Dec-17 1:10am

Karthik_Mahalingam

Comments

Member 13562560 7-Dec-17 7:46am

This code is fine,but there is a small correction that in this one when user enter value in the textbox want to press enter button then only row will be generating but i need when user enter the value in the textbox(without press any key in the keyboard) and at that time itself the row is generating .

Member 13562560 7-Dec-17 7:50am

i got the change,there instead of onchange want to use oninput then it will work extactly.thanks you so much.

Karthik_Mahalingam 7-Dec-17 9:28am

welcome.

Member 13562560 9-Dec-17 6:10am

i need a small correction in this code ie in this when a user enter 2 in the textbox and enter the details in the row and if the user want one more row then the user will enter 3 in the textbox then all the previously entered values will disappear and three new rows will appear,but what i need is when user enter 2 in the textbox then 2 rows will generate after entering values in the row if the user need again 1 or 2 more rows then he will enter 3 or 4 in the textbox then new want to generate without disappearing the values entered in the above rows.

Karthik_Mahalingam 10-Dec-17 1:42am

add a new textbox to append new rows or add buttons to differentiate between new table and append rows to table.

Member 13562560 10-Dec-17 3:23am

could you please give me the code for adding new textbox because i didn't getting