Input to table in javascript-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>"
        }

CodePudding user response：

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>";