jQuery 動態添加/刪除表單選項行完整實現

在問卷、報名等表單場景中，常需要讓用戶動態增減選項。本文提供一個基於 jQuery 的完整解決方案，支持點擊「添加選項」按鈕自動遞增編號，並為每行提供「刪除」功能。

核心邏輯

1. 容器 #contain 內用 <div class="inputs"> 包裹每行輸入框
2. 點擊「+添加選項」讀取最後一行的 placeholder，解析中文數字（一、二、三...），遞增後插入新行
3. 每行自帶「刪除」按鈕，點擊移除對應 .inputs 容器

完整 HTML + JavaScript 代碼

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
function del(el) {
  $(el).closest('.inputs').remove();
}

function add() {
  // 獲取最後一個輸入框的 placeholder
  var $lastInput = $('#contain .inputs:last input');
  var ph = $lastInput.attr('placeholder'); // 如 "選項四"
  var numMap = {'一':'二','二':'三','三':'四','四':'五','五':'六'};
  var prefix = ph.replace(/[一二三四五六]/, '');
  var lastChar = ph.match(/[一二三四五六]/)[0];
  var nextChar = numMap[lastChar] || '六'; // 超過六不再增加
  var newPh = prefix + nextChar;

  // 構建新行並插入
  $('
'
    + ''
    + '刪除'
    + '
').insertAfter($lastInput.parent());
}
</script>

<body>
<table id="table_items" class="hovertable" style="width:100%;" cellspacing="0" cellpadding="0">
  <tr>
    <td class="table_th">題目選項：</td>
    <td id="contain">
      <div class="inputs">
        <input type="text" name="comment" maxlength="30" style="width:80%" placeholder="選項一"/>
        <span onclick="del(this)" style="cursor:pointer;margin-left:5px;">刪除</span>
      </div>
      <div class="inputs">
        <input type="text" name="comment" maxlength="30" style="width:80%" placeholder="選項二"/>
        <span onclick="del(this)" style="cursor:pointer;margin-left:5px;">刪除</span>
      </div>
      <div class="inputs">
        <input type="text" name="comment" maxlength="30" style="width:80%" placeholder="選項三"/>
        <span onclick="del(this)" style="cursor:pointer;margin-left:5px;">刪除</span>
      </div>
      <div class="inputs">
        <input type="text" name="comment" maxlength="30" style="width:80%" placeholder="選項四"/>
        <span onclick="del(this)" style="cursor:pointer;margin-left:5px;">刪除</span>
      </div>
      <div>
        <a href="javascript:;" class="addRow" id="addText" onclick="add()">+添加選項</a>
      </div>
    </td>
  </tr>
</table>
</body>

優化建議

• 使用 data-index 屬性替代解析 placeholder，避免中文數字邏輯脆弱
• 綁定事件用 .on('click', '.del-btn', fn) 代替內聯 onclick，符合現代規範
• 提交表單前統一收集 $('#contain input[name="comment"]').map(...)

此方案結構清晰、易於擴展，可直接集成到項目中。