jquery - How to Add Horizontal line in Javascript - Stack Overflow

admin管理员组

文章数量:1389779

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>");
    }

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>");
    }

• javascript
• jquery

Share Improve this question Follow edited Jun 16, 2010 at 13:50 MrM asked Jun 16, 2010 at 13:45 MrMMrM 22.1k3131 gold badges116116 silver badges142142 bronze badges 4

• Why is this tagged c# and java? – jjnguy Commented Jun 16, 2010 at 13:47
• @jjnguy - Sorry about that :) – MrM Commented Jun 16, 2010 at 13:51
• @user No worries, it is just helpful for everyone if you use the right tags. I wasn't sure if you had a Java or C# ponent to your question. – jjnguy Commented Jun 16, 2010 at 13:58
• What type of element is dataField3? – user113716 Commented Jun 16, 2010 at 14:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I would get rid of document.write. Instead of the

<hr>

you are using, put a "css class" that makes the table have a visible bottom border (line will be of course only as wide as the table itself). Something like

border-bottom: 1px solid black;

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>");

本文标签： jqueryHow to Add Horizontal line in JavascriptStack Overflow