在javascript中輸入表格-有解無憂

如何將內容添加到帶有輸入欄位的 html 表中。例如這里是 html 代碼：

        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>

我想在表格中像行一樣輸出我的輸入欄位..但它不起作用我不知道我的問題在哪里我得到 [object HTMLInputElement]。我怎樣才能讓它輸入更多的值，因為這樣我只能輸入一行

uj5u.com熱心網友回復：

使用這個代碼怎么樣？它在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>

uj5u.com熱心網友回復：

您應該分配輸入欄位的值，如下所示。

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

uj5u.com熱心網友回復：

嘗試：給出tbody一個 id 以避免洗掉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>";
}

您正在嘗試插入 HTML 輸入元素而不是該元素的值。要使多個條目成為可能，請嘗試將該函式的最后一行：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362156.html

標籤：javascript html css

上一篇：JavascriptIF/ELSE-縮短功能

下一篇：遍歷javascript中的物件陣列