Javascript Ajax jQuery Html PHP Example Quiz New MORE

How to Add table row in jQuery

❮ Previous Next ❯ 
<!Doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <style>
        table,
        td,
        th {
            border: 1px solid white;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th {
            text-align: left;
        }
    </style>
    <table id="myTable">
        <tbody>
            <tr>
                <td>1</td>
                <td>jquery</td>
                <td>654 789 321</td>
            </tr>
        </tbody>
    </table>
    <script>
        //Compose template string
        String.prototype.compose = (function() {
            var re = /\{{(.+?)\}}/g;
            return function(o) {
                return this.replace(re, function(_, k) {
                    return typeof o[k] != 'undefined' ? o[k] : '';
                });
            }
        }());
        var tbody = $('#myTable').children('tbody');
        var table = tbody.length ? tbody : $('#myTable');
        var row = '<tr>' +
            '<td>{{id}}</td>' +
            '<td>{{name}}</td>' +
            '<td>{{phone}}</td>' +
            '</tr>';
        $('button').click(function() {
            //Add row
            table.append(row.compose({
                'id': 3,
                'name': 'Students Tutorial',
                'phone': '123 456 789'
            }));
        })
    </script>
</body>
</html>

Run it yourself

❮ Previous Next ❯