从formular中获取数据并制作一个表、DOM、JavaScript

Taking data from formular and making a table, DOM, JavaScript

本文关键字：一个 DOM JavaScript 获取 formular 数据      更新时间：2023-09-26

我必须从XHTML中的表单中获取数据并将其放入表中。

这是我的HTML的一部分：

<form method="post">
    <fieldset>
        <p>
            <label for="Title">Title:
                <input type="text" name="title" id="Title" />
            </label>
        </p>
        <p>
            <label for="Autor">Autor:
                <input type="text" name="autor" id="Autor" />
            </label>
        </p>
        <p>Category:</p>
        <select name="cat" id="Cat" size="1">
            <option>Bestseller</option>
            <option>Novel</option>
            <option>Music</option>...</select>
        <p>
            <input type="button" value="Send" onclick="createNode()" />
        </p>
    </fieldset>
</form>
<table id="output"></table>

我的JavaScript中的函数：

function createNode() {

        var title;
        var autor;
        var category;
        title = document.getElementById("Title").innerHTML;
        autor = document.getElementById("Autor").innerHTML;
        category = ...
        var in_table = document.getElementById("output");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        td.setAttribute("class", "buch_neu");
        td.appendChild(title);
        td.appendchild(autor);
        td.appendChild(category);
        tr.appendChild(td);
        in_table = tr.parentNode;
        var last = in_tabelle.lastChild;
        in_table.insertAfter(tr, last);
    }

但是，当我按下发送按钮时，什么也没发生。按下F12后出现错误"Node.appendChild的Argument 1不是对象，但实际上应该是方案，不是吗？

您应该创建和附加分离的元素，函数不应该返回和匿名函数。

最重要的是，您的事件监听器应该在JS:中移动

http://jsfiddle.net/ghorg12110/8hg2uw57/1/

document.getElementById("submitBtn").addEventListener("click", createNode);
function createNode() {
    var title = document.getElementById("Title").value;;
    var autor = document.getElementById("Autor").value;
    var category = document.getElementById("Cat").value;
    var in_table = document.getElementById("output");
    var tr = insertNode("tr", {}, in_table);
    insertNode("td", {"class": "buch_neu", "text": title}, tr);
    insertNode("td", {"class": "buch_neu", "text": autor}, tr);
    insertNode("td", {"class": "buch_neu", "text": category}, tr);
    insertNode("tr", {}, in_table);
}
function insertNode(type, attrs, wrapper) {
    var node = document.createElement(type);
    wrapper.appendChild(node);
    for (var key in attrs) {
        if (key === "text") {
            node.innerHTML = attrs[key];
        } else {
            node.setAttribute(key, attrs[key]);
        }
    }
    return node;
}

您得到

未能在"Node"上执行"appendChild"：参数1的类型不是"节点"。

因为title和autor是纯文本，而不是Node类型，所以不能执行此

        td.appendChild(title);
        td.appendchild(autor);

使用innerHTML而不是appendChild()。

相关文章：