无法使用JavaScript向HTML表动态添加新行_Javascript_Html

无法使用JavaScript向HTML表动态添加新行

javascript html

无法使用JavaScript向HTML表动态添加新行,javascript,html,Javascript,Html,我正在创建一个带有表单的HTML表，供用户输入一些基本数据。我需要该表能够在用户单击提交按钮时添加新行，我尝试了这里提到的不同解决方案，但迄今为止没有成功。每当我单击submit按钮时，都会出现一个小动画，显示一些移动，但不会添加任何行 <html> <head> <style> table, tr, th, td { border: 1px solid black; backgroun

我正在创建一个带有表单的HTML表，供用户输入一些基本数据。我需要该表能够在用户单击提交按钮时添加新行，我尝试了这里提到的不同解决方案，但迄今为止没有成功。每当我单击submit按钮时，都会出现一个小动画，显示一些移动，但不会添加任何行

<html>

<head>
    <style>
        table, tr, th, td {
            border: 1px solid black;
            background-color: lightgrey;
        }
    </style>
</head>

<form action="studentmark.php" method="post">
<table id="myTable">
    <tr>
        <th rowspan="2">No</th>
        <th colspan="2">Student</th>
        <th colspan="5">Subject's Score</th>
        <th rowspan="2">Total</th>
        <th rowspan="2">Average</th>
    </tr>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>English</th>
        <th>Math</th>
        <th>History</th>
        <th>Science</th>
        <th>Physics</th>
    </tr>
    <tr>
        <td><?php echo $currRow ?></td>
        <td><input type="text" name="id" value="<?php echo $id ?>"></td>
        <td><input type="text" name="name" value="<?php echo $name ?>"></td>
        <td><input type="text" name="englishScore" value="<?php echo $englishScore ?>"></td>
        <td><input type="text" name="mathScore" value="<?php echo $mathScore ?>"></td>
        <td><input type="text" name="historyScore" value="<?php echo $historyScore ?>"></td>
        <td><input type="text" name="sciencesScore" value="<?php echo $sciencesScore ?>"></td>
        <td><input type="text" name="physicsScore" value="<?php echo $physicsScore ?>"></td>
        <td><input type="text" readonly name="total" value="<?php echo $totalScore ?>"></td>
        <td><input type="text" readonly name="average" value="<?php echo $averageScore ?>"></td>
    </tr>
    <tr>
        <td colspan="9"></td>
        <td><input type="submit" value="Submit" onclick="addRow()"></td>
    </tr>
</table>
</form>

<script>
    function addRow(){
        var table = document.getElementById('myTable');
        var row = table.insertRow(table.rows.length - 1);
        var cell1 = row.insertCell(1);
        var cell2 = row.insertCell(2);
        var cell3 = row.insertCell(3);
        var cell4 = row.insertCell(4);
        var cell5 = row.insertCell(5);
        var cell6 = row.insertCell(6);
        var cell7 = row.insertCell(7);
        var cell8 = row.insertCell(8);
        var cell9 = row.insertCell(9);
        var cell10 = row.insertCell(10);

        cell1.innerHTML = '<?php echo $currRow ?>';
        cell2.innerHTML = '<input type="text" name="id" value="<?php echo $id ?>">';
        cell3.innerHTML = '<input type="text" name="name" value="<?php echo $name ?>">';
        cell4.innerHTML = '<input type="text" name="englishScore" value="<?php echo $englishScore ?>">';
        cell5.innerHTML = '<input type="text" name="mathScore" value="<?php echo $mathScore ?>">';
        cell6.innerHTML = '<input type="text" name="historyScore" value="<?php echo $historyScore ?>">';
        cell7.innerHTML = '<input type="text" name="sciencesScore" value="<?php echo $sciencesScore ?>">';
        cell8.innerHTML = '<input type="text" name="physicsScore" value="<?php echo $physicsScore ?>">';
        cell9.innerHTML = '<input type="text" readonly name="total" value="<?php echo $totalScore ?>">';
        cell10.innerHTML = '<input type="text" readonly name="average" value="<?php echo $averageScore ?>">';
    }
</script>


</html>


表，tr，th，td{
边框：1px纯黑；
背景颜色：浅灰色；
}
不
学生
受试者得分
全部的
平均值
身份证件
名称
英语
数学
历史
科学类
物理
如果您应用了所指出的问题，那么您的代码看起来很好
有关工作示例，请参见以下示例：

设i=1；
函数addRow（）{
let table=document.getElementById（“myTable”）；
//var行=table.insertRow（0）；
让row=table.insertRow（table.rows.length-1）；
设cell0=row.insertCell（0）；
设cell1=row.insertCell（1）；
设cell2=row.insertCell（2）；
cell0.innerHTML=“#”+i；
cell1.innerHTML=“”；
cell2.innerHTML=“”；
//或者，如果所有内容都相同，您可以：
列数=7；
for（设i=0；i

表格，tr，th，td{
边框：1px纯黑；
背景颜色：浅灰色；
}
单击按钮在表的第一个位置添加新行，然后添加单元格和内容
不
学生
受试者得分
全部的
平均值
身份证件
名称
英语
数学
历史
科学类
物理
#0
1。无关：HTML2中没有
。您正在提交表单，这将导致页面重新加载。删除表单标签，或者在JS代码中的click事件上调用preventDefault（）
，或者使用AJAX将其设置为动态页面，但这将是另一种讨论。您可能更喜欢在这些行中循环，而不是添加多个全局变量。@ChrisG但是如果我删除表单标记，我将如何处理在文本输入中输入的数据？