Question

我必须从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的参数1不是一个对象，但实际上它应该是方案，不是吗？

Answer 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;
}

Answer 2

你得到了

无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：参数1不是类型＆＃39;节点＆＃39;

因为title和autor是纯文字而不是Node类型，所以你不能这样做

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

使用innerHTML代替appendChild()。

从公式中获取数据并制作表格，DOM，JavaScript

2 个答案: