循环遍历每个表格行中的每个输入

Question

我觉得我的需求很基本，但我找不到示例。

我不怎么使用 jQuery，但我需要一个函数来遍历给定表中的每一行，然后遍历该行中的每个输入，然后按顺序重新索引每个 id 和 name 属性。服务器端应用程序需要按顺序编号的输入才能正确构建对象列表。我有单独的函数来删除和添加行，因此用户有可能删除中间的行，从而产生间隙。

首先，我已经有了这个，但我不确定如何使用 jQuery 在循环中执行循环，并简单地评论了该部分。

编辑： 我还提供了 HTML 的 sn-p 以获取更多上下文。对于收集对象的服务器端应用程序，只需要枚举 name 属性，例如 AccountCodes[0].Id 然后是 AccountCodes[1].Id 而不是 [0],[6]。

        



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

“循环所有<tr>s，然后循环所有<inputs>”与“循环所有<input>s 在<table>”有何不同？?

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

许多 jQuery 函数接受一个回调，该回调接收索引作为第一个参数并使用函数返回值。 .attr() 也不例外。

元素 ID 无论如何都不会传输到服务器，所以我在这里不更改它们。

使用<tr> 的索引而不是每个<input> 的索引的变体的工作方式完全相同，它以您开始尝试的方式开始：

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

Answer 2

我仍然没有完全理解您的确切要求，但是当您查看以下 sn-p 时，您会注意到所有 input 元素的单个循环足以生成您可能需要的所有身份和名称：

function renumber() {
  $('#AccountCodeTable input').each(function (i,el) {
     el.name=el.name.replace(/\d+_?\d*/,
       $(el).parent().parent().index()+'_'+$(el).parent().index());
     el.id=el.id.replace(/\d+/,i);
     // comment out the following line for production version:
     el.value="id:"+el.id+", name:"+el.name;
  })
}
renumber()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="AccountCodeTable">
<tbody>
<tr>
 <td><input type="text" id="i3" name="n3"></td>
 <td><input type="text" id="i4" name="n33"></td>
 <td><input type="text" id="i5" name="n333"></td>
 <td><input type="text" id="i6" name="n3333"></td>
</tr><tr>
 <td><input type="text" id="i8" name="n13"></td>
 <td><input type="text" id="i9" name="n113"></td>
 <td><input type="text" id="i10" name="n1113"></td>
 <td><input type="text" id="i11" name="n11113"></td>
</tr><tr>
 <td><input type="text" id="i12" name="n32"></td>
 <td><input type="text" id="i13" name="n322"></td>
 <td><input type="text" id="i14" name="n32_22"></td>
 <td><input type="text" id="i15" name="n3_2222"></td>
</tr><tr>
 <td><input type="text" id="i16" name="n34"></td>
 <td><input type="text" id="i17" name="n344"></td>
 <td><input type="text" id="i18" name="n3444"></td>
 <td><input type="text" id="i19" name="n34444"></td>
</tr>
</tbody></table>

在我的renumber() 函数中，我给ids 和names 重新编号，方法是给它们一个由行号和列号组成的复合名称。您可以将其中一个排除在外，甚至可以以不同的方式组合它们。不管你喜欢它