Utilizing a WebGrid to display information in the following manner:
<div id="interiorGrid">
@{
var interiorList = Model.Lists;
var interiorGrid = new WebGrid(interiorList,
columnNames: new[] { "FeatureValue"},
canSort: false); }
@interiorGrid.GetHtml(
tableStyle: "table table-striped table-hover",
columns: interiorGrid.Columns(
interiorGrid.Column("IsActive", header: "",
format: @<text>
<img id="@item.ID" src=@if (item.IsActive == true){@("../../Images/Active.png");}
else{@("../../Images/InActive.png");}
onclick="return toggle('@item.ID'); return false;" /></text>),
interiorGrid.Column("FeatureValue", header: "",
format: @<text><span id='featureValue'>@item.FeatureValue</span></text>)))
</div>
The data is being populated successfully, generating HTML code on the page like this:
<div id="interiorGrid">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">
</th>
<th scope="col">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img id="312864" src=../../Images/InActive.png onclick="return toggle('312864'); return false;" /></td>
<td><span id='featureValue'>Daytime Running Lamps</span></td>
</tr>
------------MULTIPLE---------------------------
<tr>
<td>
<img id="312870" src=../../Images/Active.png onclick="return toggle('312870'); return false;" /></td>
<td><span id='featureValue'>Wipers, front intermittent</span></td>
</tr>
</tbody>
</table>
</div>
============= Attempting to loop through this and retrieve each span's text. The current attempt at code is not functioning as expected:
var gridData = $('#interiorGrid table tr').each(function () {
alert($(this).find('featureValue').text());
});