Get the Id of current table row with Jquery

Viewed 222696

Hi I have the following code in a form . When the user clicks a button I want to get the current row in order to identify which of the buttons was clicked

<tr  id="TEST1" >
    <td align="left" valign="middle">
        <div align="right">Contact</div>
    </td>
    <td colspan="4" align="left" valign="middle">
        <input type="text" id="contact1" size="20" />  Number 
        <input type="text" id="number1" size="20" /> 
    </td>
    <td>
        <input type="button"  value="Button 1" id="contact1" />
    </td>
</tr>
<tr id="TEST2" >
    <td align="left" valign="middle">
        <div align="right">Contact</div>
    </td>
    <td colspan="4" align="left" valign="middle">
        <input type="text" id="contact2" size="20" />  Number 
        <input type="text" id="number2" size="20" /> 
    </td>
    <td>
        <input type="button"  value="Button 1"  id="contact2" />
    </td>
</tr>
<tr id="TEST3" >
    <td align="left" valign="middle">
        <div align="right">Contact</div>
    </td>
    <td colspan="4" align="left" valign="middle">
        <input type="text" id="contact3" size="20" />  Number 
        <input type="text" id="number3" size="20" /> 
    </td>
    <td>
        <input type="button"  value="Button 1"  id="contact2" />
    </td>
</tr>

I thought the following Jquery would return the ID name but it doesn't

$('input[type=button]' ).click(function() {
    bid = (this.id) ; // button ID 
    trid = $('tr').attr('id'); // table row ID 
});

Can anyone give me some advice please ? thanks

8 Answers
$('#tblCart tr').click(function () {
        var tr_id = $(this).attr('id'); 
        alert(tr_id );
    });



<table class="table table-striped table-bordered table-hover" id="tblCart" cellspacing="0" align="center" >
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Item.ItemName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Price.PriceAmount)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Quantity)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Subtotal)
                    </th>
                    <th></th>
                </tr>

               @if (cart != null)
               {
                   foreach (var vm in cart)
                   {
                    <tr id="@vm.Id">
                        <td>
                            @Html.DisplayFor(modelItem => vm.Item.ItemName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => vm.Price.PriceAmount)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => vm.Quantity)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => vm.Subtotal)
                        </td>
                        <td >                            
                            <span style="width:80px; text-align:center;" class="glyphicon glyphicon-minus-sign" />                        
                        </td>
                    </tr>  
                   }
               }
            </table>
Related