增量值有效，但不适用于附加的 HTML [重复]

Posted 2023-05-08

【中文标题】增量值有效，但不适用于附加的 HTML [重复]

【英文标题】：increment value works but not on appended HTML [duplicate]

【发布时间】：2021-11-30 18:44:05

【问题描述】：

我创建了这个查询来明确地给每个复选框一个索引。但是，它似乎只适用于第一个附加行，显然只使用设置值。它从不使用 1 之后的增量值。尽管控制台仍然给出了变量的正确值，所以我对它为什么会发生感到困惑。

var rowNum = 1;
$(document).ready(function() 
  var html = '<tr> <td><input type="text" name="lName[]" id="lName" ></td> <td><input type="text" name="fName[]" id="fName" ></td> <td><input type="text" name="mName[]" id="mName"></td> <td><input type="text" name="suffixName[]" id="suffixName" ></td> <td> <select name="gender[]" id="gender"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </td> <td><input type="date" name="birthday[]" id="birthday" ></td> <td><input type="text" name="phoneNumber[]" id="phoneNumber" ></td> <td> <select name="civilStatus[]" id="civilStatus"> <option value="Single">Single</option> <option value="Married">Married</option> <option value="Widowed">Widowed</option> </select> </td> <td><input type="checkbox" name="isHeadOfFamily[' + rowNum + ']" id="isHeadOfFamily" value="1"> </td> <td><input type="checkbox" name="isEmployed[' + rowNum + ']" id="isEmployed" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInBusiness-[' + rowNum + ']" id="isSelfEmployedInBusiness" value="1"> </td> <td><input type="checkbox" name="isSelfEmployedInInformalSector[' + rowNum + ']" id="isSelfEmployedInInformalSector" value="1"> </td> <td><input type="checkbox" name="isSoloParent[' + rowNum + ']" id="isSoloParent" value="1"> </td> <td><input type="checkbox" name="isSeniorCitizen[' + rowNum + ']" id="isSeniorCitizen" value="1"> </td> <td><input type="checkbox" name="isPWD[' + rowNum + ']" id="isPWD" value="1"> </td> <td> <select name="relationToHeadOfFamily[]" id="relationToHeadOfFamily"> <option value="Spouse">Spouse</option> <option value="Child">Child</option> <option value="Sibling">Sibling</option> <option value="Parent">Parent</option> <option value="None">None</option> </select> </td> <td><button type="button" name="addmore" id="addmore">Add More</button></td><td><button type="button" name="remove" id="remove">Remove</button></td> </tr>';

  $(document).on('click', "#addmore", function() 
    $("#table_input-people").append(html);
    rowNum++;
    console.log(rowNum);
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id="table_input-people"></tbody>
</table>

【问题讨论】：

将整个 var html 行移动到您的 click 函数中，它应该可以工作。 HTML 将不会使用当前位置的 rowNum 的值进行更新

请提供相关的HTML？

ID 也必须是唯一的。

我强烈建议你克隆一行而不是在一个变量中包含这么多 HTML

这是一个 X/Y 问题，在阅读 cmets 后似乎。

【参考方案1】：

您的 HTML 是在递增的代码之外静态创建的。

您不需要将行号发送到 php，[] 会为您创建数组

ID 也必须是唯一的。您可以使用最接近的和名称^=（名称开头）导航行

改为克隆

$(document).ready(function() 
  const $row = $("#table_input-people tr").eq(0);
  $("#table_input-people").on("click", ".addmore", function() 
    const $newRow = $row.clone()
    $newRow.find("input").each(function()  this.value = "" )
    $("#table_input-people").append($newRow);
  );
  $("#table_input-people").on("click", ".remove", function() 
    $(this).closest("tr").remove()
  );
);

#table_input-people :first-child .remove  display: none 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tbody id="table_input-people">
    <tr>
      <td><input type="text" name="lName[]"></td>
      <td><input type="text" name="fName[]"></td>
      <td><input type="text" name="mName[]"></td>
      <td><input type="text" name="suffixName[]"></td>
      <td>
        <select name="gender[]" id="gender">
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
      </td>
      <td><input type="date" name="birthday[]"></td>
      <td><input type="text" name="phoneNumber[]"></td>
      <td>
        <select name="civilStatus[]">
          <option value="Single">Single</option>
          <option value="Married">Married</option>
          <option value="Widowed">Widowed</option>
        </select>
      </td>
      <td><input type="checkbox" name="isHeadOfFamily[]" value="1"> </td>
      <td><input type="checkbox" name="isEmployed[]" value="1"> </td>
      <td><input type="checkbox" name="isSelfEmployedInBusiness-[]"  value="1"> </td>
      <td><input type="checkbox" name="isSelfEmployedInInformalSector[]"  value="1"> </td>
      <td><input type="checkbox" name="isSoloParent[]" value="1"> </td>
      <td><input type="checkbox" name="isSeniorCitizen[]"  value="1"> </td>
      <td><input type="checkbox" name="isPWD[]" value="1"> </td>
      <td>
        <select name="relationToHeadOfFamily[]">
          <option value="Spouse">Spouse</option>
          <option value="Child">Child</option>
          <option value="Sibling">Sibling</option>
          <option value="Parent">Parent</option>
          <option value="None">None</option>
        </select>
      </td>
      <td><button type="button" name="addmore" class="addmore">Add More</button></td>
      <td><button type="button" name="remove" class="remove">Remove</button></td>
    </tr>
  </tbody>
</table>

【讨论】：

我的问题出在复选框上，如果未勾选，它不会向 PHP 发送任何数据。因此没有刻度的复选框没有数组索引。我必须为它们的值捕获未选中的框，所以我查看了 javascript/jquery 来手动为每一行提供一个索引，这样数据就不会被错误索引。

您只需要在服务器上处理它。您总是需要仔细检查数据，因为任何人都可以编辑表单并向您发送他们认为表单应包含的任何内容

您可以有一个隐藏字段，例如就业[1] value="1"，如果其他任何一项被选中，则更新该字段并删除该值 - 请参阅我发布的欺骗 - 还有更多