Input to table in javascript

Question

How can i add a content to html table with input fields. For example here is html code:

        function add(){
            var name = document.getElementById("name");
            var surname = document.getElementById("surname");
            var output = document.getElementById("output");
            output.innerHTML = "<tr><td>"+name+"</td><td>"+surname+"</td></tr>"


        }

  

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial- scale=1.0">
        <title>Document</title>
        <style>
            table,td{
                border: 1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
    
        <form action="">
            <div>
                <label for="name">Name</label>
                <input type="text" id="name">
            </div>
            <div>
                <label for="name">Surname</label>
                <input type="text" id="surname">
            </div>
        </form>
        <input type="button" onclick="add();" value="Add">
        <div>
            <table id="output">
                <thead><td>Name</td><td>Surname</td></thead>
                <tbody></tbody>
            </table>
        </div>
        
    
    </body>
    </html>

I want to output my input fields in the table like rows.. but it does not work i dont know where is my problem i get [object HTMLInputElement]. And how can i make it work for entering more values because like this i can only enter one row

name.value and surname.value. name and surname are HTML elements represented as JS Objects. — evolutionxbox
– evolutionxbox, Commented Nov 21, 2021 at 14:42
Another problem now i can only input one item i want to store the previous items ... — itmemilan
– itmemilan, Commented Nov 21, 2021 at 14:46

Ihor · Accepted Answer · 2021-11-21 14:53:36Z

2

How about using this code? It adds surname and name below the thead.

function add(){
  var name = document.getElementById("name");
  var surname = document.getElementById("surname");
  var output = document.querySelector("#output tbody");
  output.innerHTML += "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <form action="">
        <div>
            <label for="name">Name</label>
            <input type="text" id="name">
        </div>
        <div>
            <label for="name">Surname</label>
            <input type="text" id="surname">
        </div>
    </form>
    <input type="button" onclick="add();" value="Add">
    <div>
        <table id="output">
            <thead><td>Name</td><td>Surname</td></thead>
            <tbody></tbody>
        </table>
    </div>
</body>
</html>

edited Nov 21, 2021 at 14:53

answered Nov 21, 2021 at 14:50

Ihor

1,2621 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

itmemilan Over a year ago

but i have more in my question how can i make it work for entering multiple times ?

Ihor Over a year ago

I will edit my answer.

Ihor Over a year ago

You can check my answer now.

itmemilan Over a year ago

nice ty can you explain how this works, i mean what did you changed in the js ?

Ihor Over a year ago

output.innerHTML = "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>" this is first code. and output.innerHTML += "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>" this is code now. Change is +. This code adds new line to your table. :)

|

Abdur-Rehman M · Accepted Answer · 2021-11-21 14:41:56Z

1

you should assign the value of the input fields like below.

 function add(){
            var name = document.getElementById("name");
            var surname = document.getElementById("surname");
            var output = document.getElementById("output");
            output.innerHTML = "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
        }

answered Nov 21, 2021 at 14:41

Abdur-Rehman M

3211 silver badge6 bronze badges

2 Comments

itmemilan Over a year ago

Oh yea but it changes the table heading

Abdur-Rehman M Over a year ago

yeah that's different issue now :-)

Peter Orji · Accepted Answer · 2021-11-21 14:57:37Z

1

Try: Give tbody an id to avoid removing thead

<tbody id="output2"></tbody>

function add(){
  var name = document.getElementById("name");
  var surname = document.getElementById("surname");
  var output = document.getElementById("output2");
  output.innerHTML = "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
}

You are trying to insert an HTML input element instead of the value of the element. To make multiple entries possible try the last line of the function to:

output.innerHTML += "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";

edited Nov 21, 2021 at 14:57

answered Nov 21, 2021 at 14:44

Peter Orji

3310 bronze badges

3 Comments

itmemilan Over a year ago

but i have more in my question how can i make it work for entering multiple times ?

Peter Orji Over a year ago

check last edit

itmemilan Over a year ago

yep ty it works

Collectives™ on Stack Overflow

Input to table in javascript

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related