Get value of table cell on button click

Question

I want to get the value of a table cell by click a button in the same row of this cell. this cell is in the previous column of the button's column, this is my trying code:

<table class="table table-bordered table-hover" >
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.CategoryId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Name)
                        </th>
                        
                        <th>
                            @Html.DisplayNameFor(model => model.Quantity)
                        </th>
                        
                        
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Category.CategoryName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Name)
                            </td>
                            
                            <td>
                                @Html.DisplayFor(modelItem => item.Quantity)
                            </td>
                           
                            <td>
                                <div class="btn-group-sm">
                                    <button class="btn btn-primary" onclick="addArticle(this)">Add</button>
                                    
                                    <button class="btn btn-warning">Edit</button>
                                    
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

JS:

function addArticle(btn) {

    var RowNumber = btn.previousSibling.innerHTML;
    alert(RowNumber);
}

This code is not working,it displays undefined. Any help?

We need to see all of the relevant HTML in order to help you. I would guess that the previousSibling element to the clicked button will not be a td cell, though. If it is, then your HTML is invalid. — Rory McCrossan
– Rory McCrossan, Commented Mar 1, 2023 at 13:22
Could you share some more of your html code for context? Also, I see that you are referencing this which doesn't exist. You should use btn.previousSubling.... — Seann
– Seann, Commented Mar 1, 2023 at 13:23
you need to get your parent td of the button before doing previous: btn.parentElement.previousSibling — Pete
– Pete, Commented Mar 1, 2023 at 13:29

traynor · Accepted Answer · 2023-03-01 13:44:09Z

0

You need to walk the DOM tree:

btn parent
div parent
table cell previous sibling

function addArticle(btn) {
   
    var RowNumber = btn.parentElement.parentElement.previousElementSibling.innerHTML;
    alert(RowNumber);
}

answered Mar 1, 2023 at 13:44

traynor

10.6k3 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get value of table cell on button click

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