從公式中獲取數據並製作表格，DOM，JavaScript

我必須從XHTML中的表單中提取數據並將其放入表格中。從公式中獲取數據並製作表格，DOM，JavaScript

這裏是我的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是不是對象，但實際上是shoult是方案，isn`t呢？

來源

2015-11-16 Diana Papukchieva

'createNode（）'是返回從來沒有執行 – Ramanlfc

我把點，因爲在我的代碼的函數它保持與作者和標題後相同。 –

你應該創建並追加分離的元素，而你的函數不應該返回匿名函數。

最重要的是，你的事件監聽器768,16可以在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; 
}

來源

2015-11-16 12:19:55

非常感謝！你正在救我！ –

@DianaPapukchieva以更好的方式更新了我的答案 –

感謝十次幫助！ –

你

無法執行‘的appendChild’在「節點」：參數1的類型不是「節點」的

因爲title和autor是純文本不Node類型，所以你不能做到這一點

。

使用innerHTML而不是appendChild()。

來源

2015-11-16 12:18:01 Ramanlfc

從公式中獲取數據並製作表格，DOM，JavaScript

回答

相關問題