Скопируйте <tr>в html от js - PullRequest
Новая
       5

Скопируйте <tr>в html от js

0 голосов
/ 26 апреля 2019

Мне нужно скопировать некоторые tr со входами, когда событие onclick инициировано чистым JavaScript, а не jQuery или чем-то еще, и сгенерировать идентификаторы для входов. Я приложил мой HTML. Я новичок в JS, все, что я нашел его копию одного элемента. Я буду благодарен за любую помощь. 

<tr id='needToCopy'>
    <tr style='height:16.5pt'>
        <td></td>
        <td colspan="" class="s4">
            Label
        </td>
    </tr>
    <tr style='height:18pt'>
        <td></td>
        <td colspan="3" class="s17">
            Label1
        </td>
        <td class="s6">
            <input id="firstID"/>
        </td>
    </tr>
    <tr style='height:60.0pt'>
        <td></td>
        <td class="s15" colspan="3">
            label2
        </td>
        <td class="s14">
            <input id="secondID"/>
        </td>
    </tr>
    <tr style='height:18.0pt'>
        <td></td>
        <td class="s15" colspan="3">
            label3
        </td>
        <td class="s14">
            <input id=thirdId"/>
        </td>
    </tr>
</tr>
<button onclick="copy()">Press Me</button>

Ответы [ 3 ]

0 голосов
/ 26 апреля 2019

Это довольно просто, если вы хотите скопировать элемент внутрь

просто используйте этот код: 

$("#IDTag").clone();

если вы хотите добавить или добавить его, вы также можете сделать это, используя: 

$('#td').prependTo('#IDTag');

Обязательно дайте ID своему элементу, прежде чем ожидать результатов!

0 голосов
/ 26 апреля 2019

Если вы хотите скопировать все содержимое таблицы, вы можете сделать это с небольшим количеством JavaScript.Как уже упоминалось в комментариях, у вас не может быть строки таблицы внутри строки таблицы, поэтому я не уверен, что вы хотели, чтобы ваши метки были в таблице tds?Для демонстрации я поменял тэги <tr> на <table>.Вы можете увидеть функциональность «копирования», работающую во фрагменте.Я также добавил идентификатор для вашей кнопки.

РЕДАКТИРОВАТЬ: 2-я версия, вероятно, ближе к тому, что вы ищете (в плане компоновки) 

document.getElementById('copybtn').addEventListener('click', copybtn, false);

function copy() {
  var html = $('#needToCopy').html();
  $('#needToCopy tr:last').after("<tr>" + html + "</tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!--<table id='needToCopy'>
  <tr style='height:16.5pt'>
    <td></td>
    <td colspan="" class="s4">
      Label
    </td>
  </tr>
  <tr style='height:18pt'>
    <td></td>
    <td colspan="3" class="s17">
      Label1
    </td>
    <td class="s6">
      <input id="firstID" />
    </td>
  </tr>
  <tr style='height:60.0pt'>
    <td></td>
    <td class="s15" colspan="3">
      label2
    </td>
    <td class="s14">
      <input id="secondID" />
    </td>
  </tr>
  <tr style='height:18.0pt'>
    <td></td>
    <td class="s15" colspan="3">
      label3
    </td>
    <td class="s14">
      <input id="thirdId" />
    </td>
  </tr>

</table>-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h2>Labels</h2>
<table id='needToCopy'>
  <tr style='height:18pt'>
    <td>Label 1</td>
    <td>Label 2</td>  
    <td>Label 3</td>
  </tr>
  <tr style='height:60.0pt'>
    <td class="s6">
        <input id="firstID">
    </td>
    <td class="s15">
      <input id="secondID" />
    </td>
    <td class="s14">
       <input id="thirdId" />
    </td>
  </tr>
</table>

<button id="copybtn" onclick="copy()">Press Me</button>
0 голосов
/ 26 апреля 2019

cloneNode, если вы хотите сделать копию того же узла в html. 

var div = document.getElementById('div_id'),
    clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
...