jQuery点击按钮在同一表格内添加subtitle行问题求助

我已经实现了点击按钮新增完整表格的功能，现在想要实现点击按钮在同一个表格内添加subtitle行，多次检索都没找到可行方案。我已经学习jQuery5个月，希望得到帮助。

现有可运行的新增完整表格代码 #

jQuery代码 #

$("#add_btn").click(function() {
  var tablecount = "";
  $("#clone_table").children("table").each(function() {
    tablecount = $(this).attr("id");
  });

  var tableid = tablecount.split("_");
  var dicisplineno = parseInt(tableid[1]) + 1;

  //$('.NewTable').detach();
  var $clone = $('#D4_1').clone(true).addClass('NewTable');
  $clone.attr("id", "D4_" + dicisplineno);
  $clone.find(".column1").text("4." + dicisplineno);
  $clone.find("#cancel_btn").append("<button type='button' name='x_btn' class = 'xx_btn' id = 'x_btn'>-</button>");
  $('#clone_table').append($clone);
});

// 表格删除逻辑
$('table').on('click', '.xx_btn', function() {
  $(this).parents("table").remove();
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="user_form3">

  <table style="width:100%;" id="D4">
    <tr>
      <th id="th"> Discipline 4 : Failure Analysis</th>
    </tr>
  </table>

  <button type="button" name="add_btn" id="add_btn">+</button>

  <div id="clone_table">
    <table style="width: 100%;" id="D4_1">

      <tr>
        <th class="column1" style="width: 5%;">4.1</th>
        <th style="width: 45%;"><input type="text" id="title1" autocomplete="off"></th>
        <th style="width: 50%;">Attachment <span id="cancel_btn"></span></th>
      </tr>

      <tr>
        <th style="width: 5%;"></th>
        <th style="width: 45%;"><input type="text" id="subtitle1" autocomplete="off"></th>
      </tr>

      <tr>
        <td></td>
        <td><textarea name="txtarea_a" id="txtarea4_1a" cols="50" rows="5" autocomplete="off"></textarea></td>

        <td>

          <div id='upload-form4_1'>
            <table class="table table-bordered" id="dynamic_field4_1">
              <tr>
              </tr>
            </table>
            <div id="file4_1">
              <input class='file-inputt1' type='file' id='file4_1a' name='file_1[]' onchange="ValidateSingleInput2(this);selectFile2(this);" accept="application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-powerpoint">
              <!---->
            </div>
          </div>
          <input type="file" name="file_1[]" id="fileToUpload4_1" onchange="ValidateSingleInput(this);" multiple="multiple" style="display: none;">
          <input type="button" value="Images" onclick="document.getElementById('fileToUpload4_1').click();" />
          <div id="preview4_1"></div>
        </td>
      </tr>
    </table>
  </div>
  </table>
</form>

尝试修改后报错的代码 #

$("#add_btn").click(function()
{
    var tablecount = "";
    $("#D4_1").children("tr").each(function() { 
        tablecount = $(this).attr("id");
    });

    var tableid = tablecount.split("_");
    var dicisplineno = parseInt(tableid[1]) + 1;

    //$('.NewTable').detach();
    var $clone = $('#subtitle_1').clone(true).addClass('NewTable');
        $clone.attr("id", "subtitle_" + dicisplineno);
        $clone.find(".column1").text("4." + dicisplineno);
        $clone.find("#cancel_btn").append("<button type='button' name='x_btn' class = 'xx_btn' id = 'x_btn'>-</button>");
    $('#clone_table').append($clone);
});

//$(".xx_btn").click(function()
$('table').on('click', '.xx_btn', function()
{
    $(this).parents("table").remove();
});

问题原因&解决方案 #

错误原因 #

1. 要克隆的subtitle行本身没有设置id="subtitle_1"，$('#subtitle_1')获取不到元素，克隆直接失败
2. 追加逻辑错误，你把新行追加到了#clone_table容器里，而不是已有表格的内部，自然没法加到同一个表格
3. 遍历行取id的逻辑无效，原表格的行没有设置id属性，tablecount会是undefined，调用split方法直接触发报错

修复步骤 #

1. 先给subtitle模板行加标识类，方便获取克隆

<!-- 给原来的subtitle行加class，同时加删除按钮容器 -->
<tr class="subtitle-row">
  <th style="width: 5%;"></th>
  <th style="width: 45%;"><input type="text" id="subtitle1" autocomplete="off"></th>
  <th><button type='button' class='del-subtitle'>-</button></th>
</tr>

2. 新增专门的subtitle添加按钮（也可以自己修改原有按钮逻辑区分功能）

<button type="button" id="add_subtitle_btn">新增副标题行</button>

3. 替换对应jQuery逻辑

// 新增subtitle行逻辑
$("#add_subtitle_btn").click(function() {
  // 此处以追加到id为D4_1的表格为例，可根据需求修改目标表格选择器
  const $targetTable = $('#D4_1');
  // 克隆模板行
  const $newSubtitle = $targetTable.find('.subtitle-row').first().clone(true);
  // 清空克隆行的输入框值
  $newSubtitle.find('input').val('');
  // 生成唯一id避免重复
  const rowCount = $targetTable.find('.subtitle-row').length + 1;
  $newSubtitle.find('input').attr('id', `subtitle${rowCount}`);
  // 追加到目标表格末尾
  $targetTable.append($newSubtitle);
});

// 删除单独subtitle行逻辑
$('table').on('click', '.del-subtitle', function() {
  $(this).closest('tr').remove();
});

内容的提问来源于stack exchange，提问作者Steve leeminhui