Question

<table class="table table-bordered table-hover table-striped data-table" id="data-table" style="display: table;">
    <thead>
        <tr>
            <th>Sr #</th>
            <th>Services</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody class="data">
        <tr>
            <td align="center" id="sr">1</td>
            <td align="center" id="items">Hotel</td>
            <td align="center" id="price">
                <div class="col-md-12">
                    <input type="number" name="price" class="form-control Hotel price" value="0" min="0">
                </div>
            </td>
        </tr>
        <tr>
            <td align="center" id="sr">2</td>
            <td align="center" id="items">Umrah</td>
            <td align="center" id="price">
                <div class="col-md-12">
                    <input type="number" name="price" class="form-control Umrah price" value="0" min="0">
                </div>
            </td>
        </tr>
        <tr>
            <td align="center" id="sr">3</td>
            <td align="center" id="items">Visa</td>
            <td align="center" id="price">
                <div class="col-md-12">
                    <input type="number" name="price" class="form-control Visa price" value="0" min="0">
                </div>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan="2" align="center">
                <label>Total Amount : </label>
            </td>
            <td colspan="1" align="center">
                <div class="col-md-12">
                    <input type="text" id="total_amount" class="form-control" readonly="">
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <label>Invoice Status : </label>
            </td>
            <td colspan="2" align="center">
                <div class="col-md-12">
                    <select class="form-control inv_status">
                        <option value="">--Select Status---</option>
                        <option value="Paid">Paid</option>
                        <option value="Partial">Partial</option>
                        <option value="Unpaid">Unpaid</option>
                    </select>
                </div>
                <div class="col-md-6 partial" style="display: none;">
                    <input type="text" id="partial_am" class="form-control" placeholder="Enter Partial Amount">
                </div>
            </td>
        </tr>
    </tbody>
</table>

我需要在“服务”和“服务”下破坏行的所有行。 “价格”标题有两个不同的变量：

var services = Umrah,Hotel,Visa
var prices = 0,0,0

如何使用jQuery执行此操作？

Answer 1

要实现您的要求，您可以使用nth-child选择器检索所需的列，然后使用map生成其中的值数组。试试这个：

var services = $('table tbody:eq(0) tr > td:nth-child(2)').map(function() {
    return $(this).text();
}).get().join(',');

var prices = $('table tbody:eq(0) tr > td:nth-child(3)').map(function() {
    return $(this).find('input').val();
}).get().join(',');

console.log(services);
console.log(prices);

Working example

或者，您可以手动创建数组并通过表格的行在单个循环中更新它们：

var services = [];
var prices = [];

$('table tbody:eq(0) tr').each(function() {
    var $row = $(this);
    services.push($row.find('> td:nth-child(2)').text());
    prices.push($row.find('> td:nth-child(3) input').val());
});

Working example

最后，正如@Michael所发现的那样，您有几个重复的id属性分配给HTML中的多个元素。这是无效的，因为id在document中必须是唯一的。如果您需要对元素进行分组，请使用类。

仅具有特定Id的所有行值

1 个答案: