how to get the attribute values of the table row using jquery?

Question

I have a following razor to create a table.

@model IEnumerable<iBoxV5.Model.Common.AdvancedSearch>
<table id="SearchFieldsTable">
  <thead>
    <tr>
    <th>
        ColumnName
    </th>
    <th>
        FilterValues
    </th>
    <th>Updated Before</th>
    </tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr [email protected] [email protected] [email protected] [email protected] id=@(index++)>
    <td>
        @Html.DisplayFor(modelItem => item.ColumnName)
    </td>
    <td>
        @Html.TextBoxFor(modelItem => item.FilterValue, new { @class = "FrmTextBox advSearch" });

        @Html.TextBoxFor(modelItem => item.FilterValue, new { @class = "FrmTextBox advSearch" });
    </td>
    <td>
        @Html.TextBoxFor(modelItem => item.FilterValueTo, new { @class = "FrmTextBox advSearch" });
    </td>
</tr>
}
</tbody>
</table>

And In the above I have added few attributes for the like ColumnName.

I wants to build a JSON for the each row of the Table.

I tried with the following jquery Snippet.

var SearchFieldsTable = $("#SearchFieldsTable tbody");

var trows = SearchFieldsTable[0].rows;

$.each(trows, function (index, row) {
    var ColumnName=$(row).attr("ColumnName");
});

But the above is not returning the ColumnName I expected.

Please post the rendered markup instead of serverside codes. — Ram
– Ram, Commented Sep 20, 2012 at 10:28

Muru Bakthavachalam · Accepted Answer · 2014-03-07 21:23:08Z

5

try this;

$("#trowId").attr("attrbuteName");

answered Mar 7, 2014 at 21:23

Muru Bakthavachalam

1,35012 silver badges8 bronze badges

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

Comments

NullPoiиteя · Accepted Answer · 2012-09-20 10:21:11Z

2

you can get the value by either class or id like

var ColumnName=$(row).attr(".ColumnName").val();

or

var ColumnName=$(row).attr("#ColumnName").val();

answered Sep 20, 2012 at 10:21

NullPoiиteя

57.3k23 gold badges130 silver badges148 bronze badges

Comments

Bharath · Accepted Answer · 2012-09-20 10:32:09Z

2

May be this will be helpful.

var SearchFieldsTable = $("#SearchFieldsTable tbody");

var trows = SearchFieldsTable.children("tr");

$.each(trows, function (index, row) {
    var ColumnName=$(row).attr("ColumnName");
    // .... Your codes here 
});

FYI: "tbody" don't have "rows". The following is wrong

SearchFieldsTable[0].rows

You can use the following code instead to use above code.

var SearchFieldsTable = $("#SearchFieldsTable");

answered Sep 20, 2012 at 10:32

Bharath

8077 silver badges14 bronze badges

Comments

Praveen Kumar Purushothaman · Accepted Answer · 2012-09-20 10:23:03Z

0

Some browsers won't support custom attributes. So, you can better use data().

var ColumnName = $(row).data("ColumnName");

And in the row, define it as:

<tr [email protected] ...

answered Sep 20, 2012 at 10:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

Ram · Accepted Answer · 2012-09-20 10:27:10Z

0

You are defining a local variable in each iteration, now your ColumnName variable only stores the attribute of last row. Also ColumnName in not a valid attribute. You can use data-* attributes and map method.

var columnName = $("#SearchFieldsTable tbody tr").map(function(){
                      return $(this).data('ColumnName')
                 })

Now columnName is an array of column names.

map()
data()

edited Sep 20, 2012 at 10:27

answered Sep 20, 2012 at 10:21

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

how to get the attribute values of the table row using jquery?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related