Question

我有一个收集数据并将其放入数组的表单

所以我试图创建一个页面，一旦按下按钮，它就会运行这个功能，我希望它显示在我已分配ID的段落中的表单下方，以便可以添加更多数据

然而，当我运行页面时，它会在新页面中显示该表并删除该表单。关于如何让它显示表格下面的表格的任何想法？

这是电话......

document.getElementById("appTable").innerHTML = showAppointments(appointmentArr);

这是函数......

function showAppointments(appointmentArr){ //Function to display all data in a table
        var splitAppointment = new Array();         
        for(var i=0; i <= appointmentArr.length; i++){
            if(i==0){ //Draw intitial table only once
                document.writeln('<table border="1">');
                document.writeln("<tr>");
                document.writeln("<th>Priority</th>");
                document.writeln("<th>Date</th>");
                document.writeln("<th>Start</th>");
                document.writeln("<th>End</th>");
                document.writeln("<th>Subject</th>");
                document.writeln("<th>Venue</th>");
                document.writeln("</tr>");
            }else{
                splitAppointment = appointmentArr[i-1].split(';'); //Split the main array by ";" into a seperate array to be read at current index
                document.writeln("<tr>");
                for(var j=0; j < splitAppointment.length; j++){ //Display each row of data in the table for single appointment details 
                    document.writeln("<td>"+splitAppointment[j]+"</td>");
                }
            document.writeln("</tr>");  
            }
        }
        document.writeln("</table>");
    }

提前致谢。

Answer 1

您需要创建元素并将它们添加到DOM中，而不是使用document.writeln，如下所示：

var table = document.createElement("table");
table.setAttribute("border","1");
document.body.appendChild(table);
var tr = document.createElement("tr");
table.appendChild(tr);
var th = document.createElement("th");
tr.appendChild(th);

Answer 2

我用不同的方式修复它。

我将所有信息写入变量，然后使用innerHTML输出变量，并在同一页面上正确地写入了表格的所有数据。

例如

表+ ='' ...

等等

尝试使用JS更新段落元素，但它会创建一个新页面

2 个答案: