html - 增量值有效，但不适用于附加的 HTML

Question

我创建了这个查询来明确地给每个复选框一个索引。但是，它似乎只适用于第一个附加行，显然只使用设置值。它从不使用 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>

标签： htmljqueryarrayscheckbox

Answer 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>