Question

I want to create a few rows by running a loop as in the code below:

<table>
    <% for (var i = 0; i <= 2; i++)
       { %>
       <tr id="Row" +"i"> // i want to give unique row ID based on my "i" variable
       <td><%:Html.TextBoxFor(m=>m.ChildData[i].ChildName) %></td>
       </tr>
       <%} %>
</table>

In the resulting table, I want each row to have a unique ID:

<tr id="Row1">,<tr id="Row2">,<tr id="Row3">, etc.

How can I do this?

Answer 1

<table>
    <% for (var i = 0; i <= 2; i++) { %>
        <tr id="Row<%= i %>"> 
            <td>
                <%= Html.TextBoxFor(m => m.ChildData[i].ChildName) %>
            </td>
       </tr>
    <% } %>
</table>

But if you need those ids for manipulating the rows with javascript then you really don’t need to assign any ids. For example jQuery provides you with functions that allow you to pass the current index of the selector. For example:

$('table tr').each(function(index, row) {
    // build the id, the same way as if you were building it on the server
    var id = 'Row' + (index + 1);

    // get the corresponding textbox that's inside this row
    var textbox = $('input[type="text"]', row);

    ...
});