CODEWITHSUNDEEP
jqueryhtmlappend
Sanganabasu
Sanganabasu

Reputation: 927

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

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.

Upvotes: 0

Views: 1952

Answers (1)

letiagoalves
letiagoalves

Reputation: 11302

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

Upvotes: 2

Related Questions