Get specific table row data in Jquery

Question

I have a table like this:

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

Each row in table have a button to click, I want to get column Shopfront Product ID, Quantity, Special Price, Start Date, End Date value in which row button click. I tried this in Jquery:

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

But it give me all column data of clicked row. How I can just get specific column like I expected?

Thank you very much

Maksim Koronchik · Accepted Answer · 2020-06-05 09:29:30Z

You need use textval without .first. Also it will be great to add data-label attribute to each td element. It can helps to serialize all data to one object:

$(".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>

Collectives™ on Stack Overflow

Get specific table row data in Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related