LearnFast.Ninja

jQuery add tr row to table - Example

How to use jQuery to add row to table. In this example you will see how to insert the new row after the last tr, but remember you can change the query, for example it can be add row after tr:contains(...

Main idea:
$("#MyTable tr:last").after(myRow);

Working example code:

<!DOCTYPE html>

<html>

<head>

    <title>Untitled Page</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        function addRow() {

            var myRow = "<tr><td>C</td><td>3</td></tr>";

            $("#MyTable tr:last").after(myRow);

        }

    </script>

</head>

<body>

    <table id="MyTable" border="0" cellpadding="0" cellspacing="0">

        <tr>

            <td>

                A

            </td>

            <td>

                1

            </td>

        </tr>

        <tr>

            <td>

                B

            </td>

            <td>

                2

            </td>

        </tr>

    </table>

    <br />

    <div onclick="addRow()" style="color: Blue; text-decoration: underline;">

        Add row to table

    </div>

</body>

</html>


Result:


Tags

jquery

after tr last table