在Jquery中获取特定表行数据

Question

我有一张这样的桌子：

<table class="datatable" id="datatable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Shopfront Product ID</th>
            <th>Shopfront Product Name</th>
            <th>Quantity</th>
            <th>Base Price</th>
            <th>Special Price</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>11EA8E6B-346F-00B2-BCFE-023831B74848</td>
            <td>Heineken Lager Sleek 330ml Can 24pk</td>
            <td>1</td>
            <td>2.99</td>
            <td>1.99</td>
            <td></td>
            <td></td>
            <td>
                <button class="accept-btn">Accept</button>
            </td>
            </tr>
            <tr>
                <td>2</td>
                <td>11EA8E6B-346F-00B2-BCFE-023831B74848</td>
                <td>Heineken Lager Sleek 330ml Can 24pk</td>
                <td>6</td>
                <td>15.00</td>
                <td>13.99</td>
                <td>2020-05-31 00:00:00</td>
                <td>2020-06-12 00:00:00</td>
                <td>
                    <button class="accept-btn">Accept</button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>11EA8E6B-346F-00B2-BCFE-023831B74848</td>
                <td>Heineken Lager Sleek 330ml Can 24pk</td>
                <td>24</td>
                <td>37.00</td>
                <td>35.00</td>
                <td></td>
                <td>2020-06-12 00:00:00</td>
                <td>
                    <button class="accept-btn">Accept</button>
                </td>
            </tr>
        </tbody>
</table>

表格中的每一行都有一个按钮可以点击，我想获取列 Shopfront 产品 ID、数量、特价、开始日期、结束日期值在哪个行按钮点击。我在 Jquery 中试过这个：

$(".accept-btn").click(function() {
    $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); 
        console.log(textval.first);
    });
});

但它给了我点击行的所有列数据。我如何才能像我预期的那样获得特定的列？

非常感谢

Answer 1

您需要使用 textval 而不使用 .first。将 data-label 属性添加到每个 td 元素也会很棒。它可以帮助将所有数据序列化到一个对象：

$(".accept-btn").click(function() {
	let data = {};
    $(this).closest('tr').find('td[data-label]').each(function() {
        data[$(this).data('label')] = $(this).text();
    });
    console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="datatable" id="datatable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Shopfront Product ID</th>
            <th>Shopfront Product Name</th>
            <th>Quantity</th>
            <th>Base Price</th>
            <th>Special Price</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>
		<tr>
		    <td data-label="id">1</td>
		    <td data-label="productId">11EA8E6B-346F-00B2-BCFE-023831B74848</td>
		    <td data-label="name">Heineken Lager Sleek 330ml Can 24pk</td>
		    <td data-label="quantity">1</td>
		    <td data-label="price">2.99</td>
		    <td data-label="specialPrice">1.99</td>
		    <td data-label="start"></td>
		    <td data-label="end"></td>
		    <td>
		        <button class="accept-btn">Accept</button>
		    </td>
		</tr>
        <tr>
            <td data-label="id">2</td>
            <td data-label="productId">11EA8E6B-346F-00B2-BCFE-023831B74848</td>
            <td data-label="name">Heineken Lager Sleek 330ml Can 24pk</td>
            <td data-label="quantity">6</td>
            <td data-label="price">15.00</td>
            <td data-label="specialPrice">13.99</td>
            <td data-label="start">2020-05-31 00:00:00</td>
            <td data-label="end">2020-06-12 00:00:00</td>
            <td>
                <button class="accept-btn">Accept</button>
            </td>
        </tr>
        <tr>
            <td data-label="id">3</td>
            <td data-label="productId">11EA8E6B-346F-00B2-BCFE-023831B74848</td>
            <td data-label="name">Heineken Lager Sleek 330ml Can 24pk</td>
            <td data-label="quantity">24</td>
            <td data-label="price">37.00</td>
            <td data-label="specialPrice">35.00</td>
            <td data-label="start"></td>
            <td data-label="end">2020-06-12 00:00:00</td>
            <td>
                <button class="accept-btn">Accept</button>
            </td>
        </tr>
    </tbody>
</table>