Question

因此，我试图制作一个表格，其中添加了3个Textareas的内容。

我成功地添加了它们，但仅使用innerHTML，但现在我正在努力用DOM样式替换innerHTML（如appendChild等）。

表：

<header class="datagrid">
<h1> Zitatenbaum </h1>
<table id ="ZitatenOrdnung">
    <thead>
        <tr>
            <th>Zitat</th>
            <th>Autor</th>
            <th>Ihre Bewertung </th>
        </tr>
    </thead>
</table>
</header>

形式：

<form>
        <textarea  rows = "5" cols = "60" placeholder="Zitat einfügen" id = "Zitat1"> </textarea>
        <input type ="text" id="Autor1" placeholder="Autor einfügen"/>
        <input id="Bewertung" type="text" placeholder="Bewertung von 1-10" />
    <button id = "Einreichen">Einreichen </button>
     <button id = "Löschen">Löschen</button>
  </form>

脚本：

<script>

    document.getElementById("Add").innerHTML = "Add";
    document.getElementById("Add").addEventListener("click",
        function(e){
            e.preventDefault();
                if((document.getElementById("Autor1").value !== "" && document.getElementById("Quote1").value !== ""&& (document.getElementById("Rating"
                    ).value > 1)  && document.getElementById("Rating").value < 10)){
                    var table = document.getElementById("ZitatenOrdnung");
                    var row = table.insertRow(1);
                    var cell1 = row.insertCell(0);
                    var cell2 = row.insertCell(1);
                    var cell3 = row.insertCell(2);
                    var cell4 = row.insertCell(3);
                    cell1.lastChild.nodeValue = ('"' + document.getElementById("Quote1").value + '"');
                    cell1.setAttribute('contentEditable', 'true');
                    cell2.innerHTML = ("~" + document.getElementById("Autor1").value);
                    cell3.innerHTML = (document.getElementById("Rating").value);
                    cell3.setAttribute('contentEditable', 'true');
                    cell3.style.textAlign = 'center';

Answer 1

您插入的单元格为空，但没有子单元格，因此lastChild未定义。

您可以改为添加textNode：

cell1.appendChild(document.createTextNode('"' + document.getElementById("Zitat1").value + '"'));

还没有ID Quote1的元素（我想你的意思是Zitat1）

关闭Javascript HTML5取代innerHTML

1 个答案: