Unable to dynamically add new row to HTML table using JavaScript

Question

I am creating a HTML table with a form for users to input some basic data. I need the table to be able to add a new row when users click the submit button, I've tried the different solutions mentioned here but I had no success so far. Whenever I click the submit button there will be a small animation showing a bit of movement but no rows are added.

<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

Your code seems fine if you apply the problems pointed out by Chris G .

See the following example for a working example:

 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

Unable to dynamically add new row to HTML table using JavaScript

Question

1 answers

solution1
0 2019-04-24 12:49:45

Unable to dynamically add new row to HTML table using JavaScript

Question

1 answers

solution1 0 2019-04-24 12:49:45

solution1
0 2019-04-24 12:49:45