JQuery reading table row value

Question

I have tried different ways on the net but nothing is working. Below is my table.

I want the values of ID and inputbox. Below is my table.

<a id="procressGrid" class="deletePageLink" href="#" title="Delete Menu" >Process Grid</a>
<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
    <tr class="gridTitleRow">
        <td class="numberingTd width36">&nbsp;</td>

        <td class="iconLink width60">Sort Order</td>
        <td class="iconLink widthAuto">Display Name</td>
        <td class="iconLink widthAuto">Url Name</td>
        <td class="iconLink widthAuto">Active</td>
    </tr>
    @foreach (var grp in distMenu)
    { 
        @Html.Hidden("Id", @grp.Id)
        <tr class="gridRow">
            <td class="numberingTd">@(num++)</td>
            <td class="cellTd"><input name="code" class="numberField" type="text" value="@grp.Id" /></td>
            <td class="cellTd">@grp.DisplayName</td>
            <td class="cellTd ">@grp.UrlName Us</td>
            <td class="cellTd ">@grp.Active</td>
        </tr>
    }
</table>
</div>

Chandu · Accepted Answer · 2011-06-11 15:07:42Z

2

HTML Element's ID's should be unique. Hence changed the HTML rendering you were using. Check the JS function getIDs to see how to get the ID's as an array.

<script type="text/javascript">
    function getIDs(){
     var dataArray = [];
     $.each($(".gridTable tr:not(.gridTitleRow)"), function(a, b){
        var id = $("input.idField", b).val();
                var code = $("input[name='code']", b).val();
                dataArray.push({
                 "id": id,
                 "code": code
                })
     });
     return  dataArray;
    }
</script>


<a id="procressGrid" class="deletePageLink" href="#" title="Delete Menu" >Process Grid</a>
<div class="gridDiv">
<table class="gridTable" cellspacing="0" cellpadding="0">
    <tr class="gridTitleRow">
        <td class="numberingTd width36">&nbsp;</td>

        <td class="iconLink width60">Sort Order</td>
        <td class="iconLink widthAuto">Display Name</td>
        <td class="iconLink widthAuto">Url Name</td>
        <td class="iconLink widthAuto">Active</td>
    </tr>
    @foreach (var grp in distMenu)
    { 
        <tr class="gridRow">
            <td class="numberingTd">
                            @(num++)
                            @Html.Hidden("Id_" + num, @grp.Id, new{class="idField"})
                        </td>
            <td class="cellTd"><input name="code" class="numberField" type="text" value="@grp.Id" /></td>
            <td class="cellTd">@grp.DisplayName</td>
            <td class="cellTd ">@grp.UrlName Us</td>
            <td class="cellTd ">@grp.Active</td>
        </tr>
    }
</table>
</div>

edited Jun 11, 2011 at 15:07

answered Jun 11, 2011 at 14:35

Chandu

83.2k19 gold badges137 silver badges136 bronze badges

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

3 Comments

Pirzada Over a year ago

Thanks . What if I want to get textbox value as well which is <input name="code" class="numberField" type="text" value="@grp.Id" /> . Because I need the Id which in array will be used to save textbox value. How to handle this? . If I push those in array than Id will be key and textbox will be value?

Chandu Over a year ago

@pirzada: Updated the post..Pls chk

Pirzada Over a year ago

Thanks again. 1 last question I hope you won't mind. How do I pass array from $.ajax in url: "/HeaderMenu/So", type: "POST", data: JSON.stringify({id: dataArray}), . Please

Collectives™ on Stack Overflow

JQuery reading table row value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related