Question

I would like to add a horizontal seperating line on a dynamic populated table. How do I do this? Below is a snippet.

    function addNewRow() {
    $('#displayTable tr:last').after('<tr><td style="font-size:smaller;" class="dataField1"></td><td style="font-size:smaller;" class="dataField2"></td><td style="font-size:smaller;" class="dataField3"></td></tr>');
    var $tr = $('#displayTable tr:last');
        $tr.find('.dataField1').text($('#txtName').val());
        $tr.find('.dataField2').text($('#txtAddress').val());
        $tr.find('.dataField3').text('document.write("<tr><td colspan=\"2\"><hr \/><\/td><\/tr>");
    }

Answer 1

Prevent document.write at all times, like everywhere unless you know exactly what you’re doing.

Evil thing. Give this a shot:

$('#displayTable tr:last').after('<tr><td style="font-size:smaller;" class="dataField1"></td><td style="font-size:smaller;" class="dataField2"></td><td style="font-size:smaller;" class="dataField3"></td></tr>');
var $tr = $('#displayTable tr:last');
    $tr.find('.dataField1').text($('#txtName').val());
    $tr.find('.dataField2').text($('#txtAddress').val());
    $tr.find('.dataField3').append("<tr><td colspan=\"2\"><hr/><\/td><\/tr>");