Loop through each input inside each table row

Question

I feel like my need is pretty basic, but I'm having trouble finding an example.

I don't use jQuery much but I need a function that loops through every row in a given table and then loops through each input in that row to then re-index each id and name attribute in sequential order. The server side application needs sequentially numbered inputs in order to build the list of objects correctly. I have separate functions that remove and add rows so there is potential for a user to remove rows in the middle creating a gap.

To start I've got this but I'm unsure how to do a loop inside a loop with jQuery and simply commented that section.

Edit: I've provided a snippet of the HTML as well for a little more context. For the server-side application to collect the objects the name attribute just needs to be enumerated like AccountCodes[0].Id and then AccountCodes[1].Id instead of [0],[6] for example.

        



function LoopAccountCodeRows() {
  var accountCodeIndex = 0;
  $('table#AccountCodeTable tbody tr').each(function () {
      //loop through input logic here
      $(this).attr("id", $(this).attr("id").replace(/\d+/, accountCodeIndex));
      $(this).attr("name", $(this).attr("name").replace(/\d+/, accountCodeIndex));
      //end input loop

      accountCodeIndex++;
  });   
}
<table id="AccountCodeTable">
    <thead><tr><th></th><th>Account Codes</th><th>Budget Estimate Percent</th></tr></thead>
    <tbody>
      <tr>
        <td style="padding:.5rem;">
        </td>
        <td style="padding:.5rem;">
            <input id="AccountCodes_0__Id" name="AccountCodes[0].Id" type="hidden" value="135" />
            <input id="AccountCodes_0__Action" name="AccountCodes[0].Action" type="hidden" value="Add" />
            <input id="AccountCodes_0__AccountCode" name="AccountCodes[0].AccountCode" type="hidden" value="20-10-09-086" />
            20-10-09-087
        </td>
        <td>
            <input type="number" class="form-control percent"  id="AccountCodes_0__PercentTotal" name="AccountCodes[0].PercentTotal" value="0.10" />
            <span class="text-danger field-validation-valid" data-valmsg-for="AccountCodes[0].PercentTotal" data-valmsg-replace="true"></span>
        </td>
      </tr>
      <tr>
        <td style="padding:.5rem;" >
        </td>
        <td style="padding:.5rem;">
            <input id="AccountCodes_6__Id" name="AccountCodes[6].Id" type="hidden" value="135" />
            <input id="AccountCodes_6__Action" name="AccountCodes[6].Action" type="hidden" value="Add" />
            <input id="AccountCodes_6__AccountCode" name="AccountCodes[6].AccountCode" type="hidden" value="20-10-09-087" />
            20-10-09-087
        </td>
        <td>
            <input type="number" class="form-control percent"  id="AccountCodes_6__PercentTotal" name="AccountCodes[6].PercentTotal" value="0.10" />
            <span class="text-danger field-validation-valid" data-valmsg-for="AccountCodes[6].PercentTotal" data-valmsg-replace="true"></span>
        </td>
      </tr>
    </tbody>
    </table>

Answer 1

How is "looping all <tr>s and then all <inputs> inside them" any different from "looping all <input>s in the <table>"?

$('#AccountCodeTable tbody input').attr('name', function (i) {
    return this.name.replace(/\d+/, i);
});

Many jQuery functions accept a callback that receives the index as the first parameter and use the function return value. .attr() is not an exception.

The element IDs are not transmitted to the server anyway, so I'm not changing them here.

A variant that uses the index of the <tr> instead of the index of each <input> works exactly the same, it starts the way your attempt started:

$('#AccountCodeTable tbody tr').each(function (i) {
    $(this).find('input').attr('name', function () {
        return this.name.replace(/\d+/, i);
    });
});