Jquery loop through table trs and append div tag to current tr

Question

I have the following html code.

    <table class="table">
<thead>
    <th>Size</th>
    <th>Quantity</th>
</thead>

<tbody>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
        </td>
    </tr>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
        </td>
    </tr>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
        </td>
    </tr>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
        </td>
    </tr>
</tbody>
</table>

And I am doing loop through each tr in tbody and getting each input values. But I wanna append <div class="error-message">Error Message Here..</div>. So I want following output as below.

<table class="table">
<thead>
    <th>Size</th>
    <th>Quantity</th>
</thead>

<tbody>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
            <div class="error-message">Error Message Here..</div>
        </td>
    </tr>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
            <div class="error-message">Error Message Here..</div>
        </td>
    </tr>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
            <div class="error-message">Error Message Here..</div>
        </td>
    </tr>
    <tr>
        <td class="name">
            <input type="hidden" value="2" name="size"/>
        </td>
        <td class="description">
            <input type="text" name="quantity" class="input-xlarge" placeholder="Enter quantity here.."/>
            <div class="error-message">Error Message Here..</div>
        </td>
    </tr>
</tbody>
</table>

The javascript as below.

$('.table > tbody tr').each(function() {
        var size_id = $(this).children('.name').find('input').val();
        var quantity = $(this).children('.description').find('input').val();
        $(this).find('.description').append('<div class="error-message">Error Message Here..</div>');
}

But I am not getting that output. Please suggest me hoe to do that.

Are you getting correct excepted values in your variables size_id and quantity ? — EnterJQ
– EnterJQ, Commented Feb 22, 2013 at 11:19

letiagoalves · Accepted Answer · 2013-02-22 11:32:13Z

2

You missed ); at the end. See this DEMO

$('.table > tbody tr').each(function () {
    var size_id = $(this).children('.name').find('input').val();
    var description = $(this).children('.description');
    var quantity = description.find('input').val();
    description.append('<div class="error-message">Error Message Here..</div>');
});

edited Feb 22, 2013 at 11:32

answered Feb 22, 2013 at 11:20

letiagoalves

11.3k4 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gaurav Pandey Over a year ago

Who downvoted this and why? I too see the same problem there. Put one ")" at the end and it is working fine.

Pete Over a year ago

not me but just on a seperate note I would have cached the $(this).children('.description') variable: jsfiddle.net/zyXQC/2

Collectives™ on Stack Overflow

Jquery loop through table trs and append div tag to current tr

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related