jQuery - Get data from hiden filed in table row

 

 Watch this example on YouTube

 

{
    <table>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Address</th>
            <th></th>
        </tr>
        <tr>
            <td class="fn">John</td>
            <td class="ln">Lennon</td>
            <td class="add">1 Main Street</td>
            <td>
                <input type="hidden" id="hid" value="10" />
                <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);" />
            </td>
        </tr>
        <tr>
            <td class="fn">Jimmy</td>
            <td class="ln">Hendrix</td>
            <td class="add">2 Main Street</td>
            <td>
                <input type="hidden" id="hid" value="20" />
                <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);" />
            </td>
        </tr>
        <tr>
            <td class="fn">Miles</td>
            <td class="ln">Davis</td>
            <td class="add">3 Main Street</td>
            <td>
                <input type="hidden" id="hid" value="30" />
                <input type="submit" value="EDIT" name="btn" id="btnEdit" onclick="EditUser(this);" />
            </td>
        </tr>
    </table>
 
}

@section Scripts{
<script type="text/javascript">
    function EditUser(e) {
        debugger;
        var row = $(e).closest('tr');
        var UserID = row.find($("[id*=hid]")).val();
        var FirstName = row.find(".fn").text();
        var LastName = row.find(".ln").text();
        var Address = row.find(".add").text();
    }
</script>
}