Ряды клонирования стола

Question

У меня есть таблица, и я клонирую строки, чтобы добавить новую строку. Но я не понимаю, почему он не работает для меня. Он просто обновляет страницу каждый раз, когда я нажимаю кнопку Добавить строку. Также было бы очень полезно, если бы кто-нибудь мог предоставить мне код для увеличения <td id> с каждой клонированной строкой. Любая помощь или предложение будут оценены. Спасибо

$('.io').on('submit click change', eventHandler);

let counter = 0;

function eventHandler(event) {
  let eType = event.type;
  let eNode = event.target;

  switch (eType) {
    case 'submit':
      let clone = $('.grid tr:first-child').clone(true, true);
      $('.grid').append(clone);
      clone.find('.data').each(function(i) {
        this.disabled = true;
        this.value = '';
      });
      counter++;
      clone[0].id = `row${counter}`;
      event.preventDefault();
      event.stopPropagation();
      break;

    case 'click':
      if ($(eNode).hasClass('del')) {
        let row = $(eNode).closest('tr');
        if (row.index() !== 0) {
          row.remove();
        }
      }
      event.stopPropagation();
      break;

    case 'change':
      if ($(eNode).hasClass('type')) {
        let row = $(eNode).closest('tr');
        let pick = eNode.value !== "X" ? true : false;
        row.find('.data').each(function(i) {
          this.disabled = !pick;
          this.value = '';
        });
      }
      event.stopPropagation();
      break;

    default:
      event.stopPropagation();
      break;
  }
}

:root {
  font: 400 3vw/1.2 Arial
}

form {
  //margin: 10px auto
}

table {
  border-collapse: collapse;
  border-spacing: 10px;
  width: 100%;
}

#theader {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

th:first-of-type {
  width: 30%
}

th:nth-of-type(2) {
  width: 35%
}

th:nth-of-type(3) {
  width: 35%
}

th:last-of-type {
  width: 30%
}

td {
  padding: 0 8px
}

select,
textarea,
button {
  display: block;
  min-width: 97%;
  min-height: 1.2rem;
  font-size: initial;
}

select {
  padding: 1px 0 1px 1px
}

textarea {
  resize: vertical;
  overflow-y: auto;
  overflow-x: hidden
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class='io' action="internet" method="post" name="frmmain" id="idfrmmain" >
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>
    <tr>
      <th>Links</th>
      <th>Desciption</th>
      <th>Image</th>
      <th>URL</th>
      <th><button>Add Row</button></th>
    </tr>
  </thead>
  <tbody class='grid'>
    <tr>
      <td>
        <select class='type'>
          <option value="">Select</option>
          <xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description" />
            <option value="#{description}">
              <xsl:value-of select="description" />
            </option>
          </xsl:for-each>
        </select>
      </td>
      <td><textarea class='desc data' rows='1' cols='20'></textarea></td>
      <td><textarea class='img data' rows='1' cols='20'></textarea></td>
      <td><textarea class='url data' rows='1' cols='20'></textarea></td>
    </tr>
  </tbody>
</table>
</form>

Answer 1

Ваш код, кажется, работает, что касается вопроса об установке идентификаторов, вы должны изменить в своем коде:

clone[0].id = `row${counter}`;

следующим образом:

$( clone[0] ).attr( 'id', `row${counter}`);

Answer 2

Пожалуйста, посмотрите, может ли это помочь.

var cloneIndex = 1;

function clone(){
    $('.grid').children(".clonedInput:first-child").clone()
        .appendTo(".grid")
    //alert(cloneIndex)
        .attr("id", "clonedInput" + cloneIndex)
        .on('click', '.addrow', clone)
    cloneIndex++;
}

$(".addrow").on("click", clone);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
  <thead>
    <tr>
      <th>Links</th>
      <th>Desciption</th>
      <th>Image</th>
      <th>URL</th>
      <th><button type="button" class="addrow">Add Row</button></th>
    </tr>
  </thead>
  <tbody class='grid'>
    <tr id="clonedInput" class="clonedInput">
      <td>
        <select class='type'>
          <option value="">Select</option>
          <xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
            <xsl:sort order="ascending" select="description" />
            <option value="#{description}">
              <xsl:value-of select="description" />
            </option>
          </xsl:for-each>
        </select>
      </td>
      <td><textarea class='desc data' rows='1' cols='20'></textarea></td>
      <td><textarea class='img data' rows='1' cols='20'></textarea></td>
      <td><textarea class='url data' rows='1' cols='20'></textarea></td>
    </tr>
  </tbody>

Answer 3

A <button> без указания свойства type = по умолчанию является кнопкой типа submit. Вот почему вы часто будете видеть странно выглядящий <button type="button">. Вероятно, именно поэтому ваша страница обновляется, хотя вы обычно видите такое поведение, когда кнопка находится внутри формы. Возможно, этот тег формы просто не виден в вашем HTML отрывке.

Как упоминал @Rory McCrossan, у вас есть один обработчик событий, предположительно связанный с высокоуровневым элементом в вашем HTML (DOM), и затем внутри него вы используете оператор switch, чтобы определить, что на самом деле было нажато. Если у вас нет веских причин для этого, имеет смысл использовать ie обработчики событий для определенных c элементов, к которым они относятся. То, как у вас это получается, может работать , но вы делаете, но это гораздо менее чисто, более подвержено ошибкам и труднее работать таким образом.

Если бы это был я, я настроил это так для вашей DOM:

 <th><button type="button" class="js-add-row">Add Row</button></th>

Тогда в вашем JS:

var rowCount = 1;
$( '.js-add-row' ).on('click', function(){
    const template = `<tr class="row-${rowCount}"> ... </tr>`;
    $( this ).closest( 'table' ).find( 'tbody' ).append(template);
    rowCount++;
});

Очевидно, вы захотите вставить туда весь свой шаблон. Вместо того, чтобы хранить шаблон в JS, вы можете просто клонировать строку, которая там есть, но это работает, только если вы не хотите, чтобы пользователь удалил все строки. Или, иногда, люди будут хранить этот шаблон в DOM, но скрытый, чтобы он не был настоящей строкой. Или как элемент данных на одном из элементов таблицы. Лучшая практика может зависеть от вашего варианта использования.

Часть $( this ).closest( 'table' ).find( 'tbody' ) позволяет использовать его более многократно. Буквально говорится, откуда была нажата эта кнопка, найдите таблицу, в которой она находится, затем возьмите тег tbody. У вас может быть несколько таблиц с собственными кнопками добавления, и это все равно будет работать (в этом случае шаблон должен быть либо одинаковым, либо клонированным из этой первой строки).

Вы можете увидеть преимущество здесь изолировать этот обработчик событий. У вас есть чистая функция для этого. Его легко найти, легко изменить, легко развернуть и скопировать.

Демонстрация: JSFiddle