Невозможно добавить таблицу Dynami c внутри столбца.

Question

Мне нужно создать таблицу Dynami c со следующей структурой:

# | area         | sub area    | category        | delete 
     inp. text     inp. text      table with rows   button

, поэтому я создал следующую разметку:

 <div id="areas-container">
  <div class="row">
    <input type="button" class="btn btn-primary" value="add area" id="add-area">
    <table class="table table-bordered table-hover" id="areas-table">
      <thead>
        <tr>
          <th class="text-center">
            #
          </th>
          <th class="text-center">
            area
          </th>
          <th class="text-center">
            sub area
          </th>
          <th class="text-center">
            category
          </th>
          <th class="text-center">
            delete
          </th>
        </tr>
      </thead>
      <tbody>
        <tr id='area-0' data-id="0" class="d-none">
          <td data-name="button">
            <button type="button" class="btn btn-success row-addsub">sub area</button>
          </td>
          <td data-name="area" data-id="0">
            <input type="text" name='area0' data-type="area" placeholder="name" class="form-control" />
          </td>
          <td data-name="sub-area" data-id="0">
            <input type="text" name='sub_area0' data-type="sub-area" placeholder="name" class="form-control" />
          </td>
          <td data-name="category" data-id="0">
            <table class="table" name="categories-table">
              <tbody>
                <tr>
                  <td>test/
                  <td>
                </tr>
              </tbody>
            </table>
          </td>
          <td data-name="del text-center">
            <button type="button" class="btn btn-danger row-remove">
              <i class="material-icons">delete</i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Теперь я написал следующий код для добавить динамические c строки в таблицу:

$(document).ready(function() {

  $('#add-area').click(function() {
    let areaId = 0;
    let subAreaId = 0;
    let categoryId = 0;

    $.each($("#areas-table tr"), function() {

      // Take reference from the row
      if (parseInt($(this).data("id")) > areaId) {
        areaId = parseInt($(this).data("id"));
      }

      // Get the reference from the column
      let currSubAreaId = parseInt($(this).find('td').eq(2).data('id'));
      if (currSubAreaId > subAreaId) {
        subAreaId = currSubAreaId;
      }

      let currCatAreaId = parseInt($(this).find('td').eq(3).data('id'));
      if (currCatAreaId > categoryId) {
        subAreaId = categoryId;
      }
    });
    areaId++;
    subAreaId++;
    categoryId++;

    let tr = $("<tr></tr>", {
      id: "area-" + areaId,
      "data-id": areaId
    });

    // Clone the column
    $.each($("#areas-table tbody tr:nth(0) td"), function() {
      let curTd = $(this);
      let children = curTd.children();

      // If a name was provided, a column will be added
      if ($(this).data("name") != undefined) {
        let colName = $(curTd).data("name");
        colId = areaId; // default reference area

        switch (colName) {
          case 'sub-area':
            colId = subAreaId;
            break;
          case 'category':
            colId = categoryId;
            break;
        }

        let td = $("<td></td>", {
          "data-name": colName,
          "data-id": colId
        });

        let c = $(curTd).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(curTd).data("name") + areaId);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        let td = $("<td></td>", {
          'text': $('#areas-table tr').length
        }).appendTo($(tr));
      }
    });

    // add new row
    $(tr).appendTo($('#areas-table'));
  })

});

проблема в том, что столбец, содержащий categories-table, добавляет дополнительный столбец в таблицу с идентификатором 3, я подозреваю, что проблема связана с к методу .clone, который я использовал для клонирования строки.

$(document).ready(function() {

  $('#add-area').click(function() {
    let areaId = 0;
    let subAreaId = 0;
    let categoryId = 0;

    $.each($("#areas-table tr"), function() {

      // Take reference from the row
      if (parseInt($(this).data("id")) > areaId) {
        areaId = parseInt($(this).data("id"));
      }

      // Get the reference from the column
      let currSubAreaId = parseInt($(this).find('td').eq(2).data('id'));
      if (currSubAreaId > subAreaId) {
        subAreaId = currSubAreaId;
      }

      let currCatAreaId = parseInt($(this).find('td').eq(3).data('id'));
      if (currCatAreaId > categoryId) {
        subAreaId = categoryId;
      }
    });
    areaId++;
    subAreaId++;
    categoryId++;

    let tr = $("<tr></tr>", {
      id: "area-" + areaId,
      "data-id": areaId
    });

    // Clone the column
    $.each($("#areas-table tbody tr:nth(0) td"), function() {
      let curTd = $(this);
      let children = curTd.children();

      // If a name was provided, a column will be added
      if ($(this).data("name") != undefined) {
        let colName = $(curTd).data("name");
        colId = areaId; // default reference area

        switch (colName) {
          case 'sub-area':
            colId = subAreaId;
            break;
          case 'category':
            colId = categoryId;
            break;
        }

        let td = $("<td></td>", {
          "data-name": colName,
          "data-id": colId
        });

        let c = $(curTd).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(curTd).data("name") + areaId);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        let td = $("<td></td>", {
          'text': $('#areas-table tr').length
        }).appendTo($(tr));
      }
    });

    // add new row
    $(tr).appendTo($('#areas-table'));
  })

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="areas-container">
  <div class="row">
    <input type="button" class="btn btn-primary" value="add area" id="add-area">
    <table class="table table-bordered table-hover" id="areas-table">
      <thead>
        <tr>
          <th class="text-center">
            #
          </th>
          <th class="text-center">
            area
          </th>
          <th class="text-center">
            sub area
          </th>
          <th class="text-center">
            category
          </th>
          <th class="text-center">
            delete
          </th>
        </tr>
      </thead>
      <tbody>
        <tr id='area-0' data-id="0" class="d-none">
          <td data-name="button">
            <button type="button" class="btn btn-success row-addsub">sub area</button>
          </td>
          <td data-name="area" data-id="0">
            <input type="text" name='area0' data-type="area" placeholder="name" class="form-control" />
          </td>
          <td data-name="sub-area" data-id="0">
            <input type="text" name='sub_area0' data-type="sub-area" placeholder="name" class="form-control" />
          </td>
          <td data-name="category" data-id="0">
            <table class="table" name="categories-table">
              <tbody>
                <tr>
                  <td>test</td>
                </tr>
              </tbody>
            </table>
          </td>
          <td data-name="del text-center">
            <button type="button" class="btn btn-danger row-remove">
              <i class="material-icons">delete</i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

измените ваш селектор $.each($("#areas-table tbody tr:nth(0) td"), ... на $.each($("#areas-table tbody tr:nth(0)>td"), ..., чтобы вы выбирали только прямых потомков родительского элемента tr, а не ячеек вложенной таблицы.

EDIT

У меня та же проблема, вы на самом деле пробовали свое решение?

... Вот как оно намеревается работать правильно? нет лишних столбцов?!

$(document).ready(function() {

  $('#add-area').click(function() {
    let areaId = 0;
    let subAreaId = 0;
    let categoryId = 0;

    $.each($("#areas-table tr"), function() {

      // Take reference from the row
      if (parseInt($(this).data("id")) > areaId) {
        areaId = parseInt($(this).data("id"));
      }

      // Get the reference from the column
      let currSubAreaId = parseInt($(this).find('td').eq(2).data('id'));
      if (currSubAreaId > subAreaId) {
        subAreaId = currSubAreaId;
      }

      let currCatAreaId = parseInt($(this).find('td').eq(3).data('id'));
      if (currCatAreaId > categoryId) {
        subAreaId = categoryId;
      }
    });
    areaId++;
    subAreaId++;
    categoryId++;

    let tr = $("<tr></tr>", {
      id: "area-" + areaId,
      "data-id": areaId
    });

    // Clone the column
    $.each($("#areas-table tbody tr:nth(0)>td"), function() {
      let curTd = $(this);
      let children = curTd.children();

      // If a name was provided, a column will be added
      if ($(this).data("name") != undefined) {
        let colName = $(curTd).data("name");
        colId = areaId; // default reference area

        switch (colName) {
          case 'sub-area':
            colId = subAreaId;
            break;
          case 'category':
            colId = categoryId;
            break;
        }

        let td = $("<td></td>", {
          "data-name": colName,
          "data-id": colId
        });

        let c = $(curTd).find($(children[0]).prop('tagName')).clone().val("");
        c.attr("name", $(curTd).data("name") + areaId);
        c.appendTo($(td));
        td.appendTo($(tr));
      } else {
        let td = $("<td></td>", {
          'text': $('#areas-table tr').length
        }).appendTo($(tr));
      }
    });

    // add new row
    $(tr).appendTo($('#areas-table'));
  })

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="areas-container">
  <div class="row">
    <input type="button" class="btn btn-primary" value="add area" id="add-area">
    <table class="table table-bordered table-hover" id="areas-table">
      <thead>
        <tr>
          <th class="text-center">
            #
          </th>
          <th class="text-center">
            area
          </th>
          <th class="text-center">
            sub area
          </th>
          <th class="text-center">
            category
          </th>
          <th class="text-center">
            delete
          </th>
        </tr>
      </thead>
      <tbody>
        <tr id='area-0' data-id="0" class="d-none">
          <td data-name="button">
            <button type="button" class="btn btn-success row-addsub">sub area</button>
          </td>
          <td data-name="area" data-id="0">
            <input type="text" name='area0' data-type="area" placeholder="name" class="form-control" />
          </td>
          <td data-name="sub-area" data-id="0">
            <input type="text" name='sub_area0' data-type="sub-area" placeholder="name" class="form-control" />
          </td>
          <td data-name="category" data-id="0">
            <table class="table" name="categories-table">
              <tbody>
                <tr>
                  <td>test</td>
                </tr>
              </tbody>
            </table>
          </td>
          <td data-name="del text-center">
            <button type="button" class="btn btn-danger row-remove">
              <i class="material-icons">delete</i>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>