Question

我正在创建一个HTML表，其中包含一个供用户输入一些基本数据的表单。当用户单击“提交”按钮时，我需要该表能够添加新行。我尝试了此处提到的其他解决方案，但到目前为止没有成功。每当我单击“提交”按钮时，都会出现一个小的动画，显示出一点动静，但没有添加任何行。

<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>

Table

Answer 1

如果您应用Chris G指出的问题，您的代码似乎很好。

有关工作示例，请参见以下示例：

let i = 1;
function addRow() {
  let table = document.getElementById("myTable");
  //var row = table.insertRow(0);
  let row = table.insertRow(table.rows.length - 1);
  let cell0 = row.insertCell(0);
  let cell1 = row.insertCell(1);
  let cell2 = row.insertCell(2);
  cell0.innerHTML = "#" + i;
  cell1.innerHTML = "<input type='text'/>";
  cell2.innerHTML = "<input type='text'/>";
  
  //Or if all content would be the same, you could do:
  let columnAmount = 7;
  for(let i = 0; i < columnAmount; i++) {
    //Added the number 3 below because above this code, three cells were already added as per example.
    row.insertCell((i + 3)).innerHTML = "<input type='text'/>";
  }
  i++;
}

table, tr, th, td {
  border: 1px solid black;
  background-color: lightgrey;
}

<p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

<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>#0</td>
    <td>
      <input type="text" name="id" value="">
    </td>
    <td>
      <input type="text" name="name" value="">
    </td>
    <td>
      <input type="text" name="englishScore" value="">
    </td>
    <td>
      <input type="text" name="mathScore" value="">
    </td>
    <td>
      <input type="text" name="historyScore" value="">
    </td>
    <td>
      <input type="text" name="sciencesScore" value="">
    </td>
    <td>
      <input type="text" name="physicsScore" value="">
    </td>
    <td>
      <input type="text" readonly name="total" value="">
    </td>
    <td>
      <input type="text" readonly name="average" value="">
    </td>
  </tr>
  <tr>
    <td colspan="9">
    </td>
    <td>
      <input type="submit" value="Submit" onclick="addRow()">
    </td>
  </tr>
</table>

JSFiddle

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

1 个答案: