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.

  
 
 
 
Name
 
Score
 
Points
 
Total
 
 
 
 var rowsAdd = document.getElementById('tbl_id').insertRow(); var rowsAdded; function addMoreRows() < rowsAdded = document.getElementById('user_id').value(); for(int x=0; x"; newCell = newRow.insertCell(); newCell.innerHTML=" "; newCell = newRow.insertCell(); newCell.innerHTML=" "; newCell = newRow.insertCell(); newCell.innerHTML=" "; > 

2 Answers 2

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.

    
 
 
 
Name
 
Score
 
Points
 
Total
 
 
 
    

I learned a lot from this. Thank you for it worked! and also thank you for not telling me how dumb I was.. 🙂 I’m still learning though.. 🙂

The listener shouldn’t be on the submit button at all, it should be on the from’s submit handler. Forms can be submitted without clicking the button, so if the listener is on the button, it won’t get called. There is also no reason for the submit button or text input to have an ID. Oh, and a TD can’t contain a TR, nor is it wise to use innerHTML with a table (it’s OK to use it for an entire table or the content of a cell).

@Matthew Sant can you help me with this second question I have? Upgrading to Chrome Apps.. stackoverflow.com/questions/27478616/…

Источник

Html input text enter on table code example

We do not set anything about width (so it’s completely auto), and we set a to keep the with the correct height for our absolute positioned elements (since absolute positioned elements are removed from the flow and «does not take any space»). is our wrapper div. Use or rather a Solution 3: As a workaround you could use absolute position inputs and relative position wrapper around it to match the column size.

HTML input inside table cell

Since the text on the input can’t be predicted, every input with width:100% tries to get the most width it can. The solution is use a wrapping div with absolute positioning .

This is how it works (it obvious to me that OP understands the «wrapper div with absolute position» trick. The following is intended for someone learning CSS):

• .table .tr-inputs th has position: relative so it serves as reference for child absolute positioned objects. We do not set anything about width (so it’s completely auto), and we set a padding-bottom: 1.2rem to keep the th with the correct height for our absolute positioned elements (since absolute positioned elements are removed from the flow and «does not take any space»).
• .table .tr-inputs div is our wrapper div. We set position: absolute and set all top , right , left , bottom to 0 . Then, it stretches it self to fill its relative positioned parent, which is our .table .tr-inputs th .
• input has width: 100% so it takes all the width of its parent, which is our absolute positioned wrapper div.

.table < font-family: Arial, Helvetica, sans-serif; >.table thead < position: sticky; top: 0; >.table thead th < border: 1px solid #e4eff8; background: white; cursor: pointer; >.table thead th.header-label < cursor: pointer; background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%); color: white; border: 1px solid white; >.table th, .table td < padding: 0.2rem 0.5rem; text-align: center; >.table td < border: 1px solid #e4eff8; >.table .tr-inputs th < position: relative; padding: 0; padding-bottom: 1.2rem; margin: 0; >.table .tr-inputs div < position: absolute; display: inline-block; top: 0; right: 0; bottom: 0; left: 0; >.table input

 
 
 
 
 
 
 
 
 
0
 
Paige Bean
 
+1 (871) 458-2959
 
MOREGANIC
 
2018-12-27T11:28:50 -01:00
 
false
 
 
1
 
Knox Holman
 
+1 (880) 497-2808
 
MAINELAND
 
2017-05-07T02:54:22 -01:00
 
false
 
 
2
 
Brandy Colon
 
+1 (969) 513-2827
 
NEXGENE
 
2017-06-07T06:42:31 -00:00
 
true
 
 
3
 
Suzette Austin
 
+1 (863) 445-3604
 
JETSILK
 
2015-10-24T11:10:41 -01:00
 
true
 
 
4
 
Downs Cain
 
+1 (822) 574-2617
 
INSECTUS
 
2017-10-19T08:18:09 -01:00
 
true
 
 
5
 
Michael Yang
 
+1 (875) 492-3905
 
DELPHIDE
 
2016-08-15T01:31:55 -01:00
 
false
 
 
 

• Never position: sticky elements. Use This solution instead: Table fixed header and scrollable body
• Use background-color on elements
• Don’t use padding on elements — Use it on an inner .header-label
• .header-label should be an inner DIV if you want, no need to «classify»elements
• type=»boolean» is an invalid type value. Use string or rather a type=»checkbox»

/*QuickReset*/* /* tableFixHead https://stackoverflow.com/a/47923622/383904 */ .tableFixHead < overflow-y: auto; height: 180px; >.tableFixHead thead th < position: sticky; top: 0; >.table < border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; >.table th < background: #fff; >.table th .header-label < padding: 0.2rem 0.5rem; cursor: pointer; background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%); color: white; border: 1px solid white; white-space: nowrap; >.table td < padding: 0.2rem 0.5rem; text-align: center; border: 1px solid #e4eff8; >.table input < display: block; width: 100%; font: 14px/1.4 sans-serif; >

 
       
   0 Paige Bean +1 (871) 458-2959 MOREGANIC 2018-12-27T11:28:50 -01:00 false  1 Knox Holman +1 (880) 497-2808 MAINELAND 2017-05-07T02:54:22 -01:00 false  2 Brandy Colon +1 (969) 513-2827 NEXGENE 2017-06-07T06:42:31 -00:00 true  3 Suzette Austin +1 (863) 445-3604 JETSILK 2015-10-24T11:10:41 -01:00 true  4 Downs Cain +1 (822) 574-2617 INSECTUS 2017-10-19T08:18:09 -01:00 true  5 Michael Yang +1 (875) 492-3905 DELPHIDE 2016-08-15T01:31:55 -01:00 false    

As a workaround you could use absolute position inputs and relative position wrapper around it to match the column size.

I dont think it is a good solution but it works.

As mentioned in the answer from @Roko C. Buljan there are some points you could do better.

.table < font-family: Arial, Helvetica, sans-serif; >.table thead < position: sticky; top: 0; >.table thead th < border: 1px solid #e4eff8; background: white; cursor: pointer; >.table thead th.header-label < cursor: pointer; background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%); color: white; border: 1px solid white; >.table th, .table td < padding: 0.2rem 0.5rem; text-align: center; position: realtive; >.table td < border: 1px solid #e4eff8; >.table .input_wrapper < position: relative; width: 100%; display: block; >.table .input_wrapper::after < content: "+"; color: rgba(0, 0, 0, 0); display: block; >.table input

 
 
 
  
 
0
 
Paige Bean
 
+1 (871) 458-2959
 
MOREGANIC
 
2018-12-27T11:28:50 -01:00
 
false
 
 
1
 
Knox Holman
 
+1 (880) 497-2808
 
MAINELAND
 
2017-05-07T02:54:22 -01:00
 
false
 
 
2
 
Brandy Colon
 
+1 (969) 513-2827
 
NEXGENE
 
2017-06-07T06:42:31 -00:00
 
true
 
 
3
 
Suzette Austin
 
+1 (863) 445-3604
 
JETSILK
 
2015-10-24T11:10:41 -01:00
 
true
 
 
4
 
Downs Cain
 
+1 (822) 574-2617
 
INSECTUS
 
2017-10-19T08:18:09 -01:00
 
true
 
 
5
 
Michael Yang
 
+1 (875) 492-3905
 
DELPHIDE
 
2016-08-15T01:31:55 -01:00
 
false
 
 
 

Javascript — Adding html input to table, Teams. Q&A for work. Connect and share knowledge within a single location that is structured and easy to search. Learn more

Adding html input to table

var row= document.createElement("tr"); 

var td1 = document.createElement("td"); 

and in the end >); is a syntax error. replace it with >

Fiddle: http://jsfiddle.net/Sg2vD/

If you are using table, it is best practice to create thead and tbody elements in the table to separate the header and the body. Use the tbody to display your form input. There are some syntax error at the end of your addRow javascript function and missing row element.

 Item: 
Quantity: 
Price: AUD 
 
 
 Item Quantity Price   

Fiddle: http://jsfiddle.net/HypdD/

HTML Tables – Table Tutorial with Example Code, What is a Table in HTML? A table is a representation of data arranged in rows and columns. Really, it’s more like a spreadsheet. In HTML, with the help of tables, you can arrange data like images, text, links and so on into rows and columns of cells. The use of tables in the web has become more popular recently …

How to allow user to enter elements in an HTML table

If you are familiar with jQuery, you can use the .change handler to catch them changing the field. Test to see if it’s the last row and if there is data in it. If they have taken everything out of the row, remove it. jQuery has some great ways to do this, but it’s all dependent on how you want to write it. If so, append the new row using jQuery’s .append function. If you’re using Python and cgi_app and you use the same name attribute for each type of cell, you can use form.getlist(‘fname[]’) and it will return an array of the names.

What is the preferred way to name each field so that the server can create a list of Person entities based on the entered values?

Which generates array ‘person’

JQuery is a good suggestion, but if you don’t want to use it, you can try generating input name by appending an index. For example:

where «N» is the row index. This way may help you to easily get the entire whole row values by using (i.e.) $ GET[‘person ‘.$i.’fname’], $ GET[‘person ‘.$i.’lname’]. and so on.

HTML Input Types, Input Type Hidden. The defines a hidden input field (not visible to a user).. A hidden field lets web developers include data that cannot be seen or modified by users when a form is submitted. A hidden field often stores what database record that needs to be updated when the form is submitted.

Источник

Form Inside a Table-HTML

The HTML table model permits the authors to arrange data in the form of images, forms fields, images, formatted text, mini tables, and many more. Each table can have a corresponding description that provides a brief discussion of the table’s function. Furthermore, if users want to arrange the data smartly on websites, they can add forms inside the table cells.

This post explains the method for creating a form inside the table.

How to Create a Form Inside a Table?

You can create a table using the “ ” tag, then define table rows with the help of “ ” and use “ ” to add data inside the table. In the middle of the “ ” tag, utilize the “ ” element for creating a form in the table.

To create a form inside a table, follow the given instructions.

Step 1: Make a div Container

Initially, make a div container by using the “ ” tag. Also, add an “id” attribute and specify a name to the id for identification.

       
Student page of NAMEHERE
 
NAMEHERE's Class Schedule
 
 
Course
 
Course Number
 
Room
 
 
 Register     
Student page of NAMEHERE
 
NAMEHERE's Class Schedule
 
 
Course
 
Course Number
 
Room
 
 
 Register