Question

我有以下HTML代码。

    <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>

我正在循环遍历tbody中的每个tr并获取每个输入值。但我想追加<div class="error-message">Error Message Here..</div>。所以我想要跟随输出如下。

<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>

javascript如下。

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

但我没有得到那个输出。请建议我这样做。

Answer 1

你最后错过了）; 。见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>');
});

Jquery遍历表trs并将div标记附加到当前tr

1 个答案: