Вставьте div внутри <td>с javascript - PullRequest
Новая
       27

Вставьте div внутри <td>с javascript

0 голосов
/ 02 августа 2020

ПРИМЕЧАНИЕ. Бэкэнд этого проекта работает с Laravel

Привет, я пытаюсь создать функцию javascript, которая позволяет мне дублировать <div> и вставлять его дочерние узлы в <tr> , так что, в конце концов, я могу использовать методы POST для сохранения данных таблиц в базе данных.

Вот что я работал до сих пор: 

function newRow(id) {
    //Copy all child nodes of element with ID copyRow
    var newRow = document.getElementById('copyRow').cloneNode(true).childNodes;
    
    //Make a new element of type <tr class="product_subcategory"> </tr>
    var rowTag = document.createElement('TR');
    rowTag.className = "product_subcategory";

    //Find div where we want to add element
    document.getElementById(id).appendChild(rowTag);

    //Add all childNodes to <td>, and then to <tr>
    newRow.forEach(element => {
        var data = document.createElement('TD');
        data.appendChild(element);

        rowTag.appendChild(data);
    });
}

: 

<div id="copyRow" style="display: none">
<tr class="product_subcategory">
    <td scope="row"><input class="product_subcategory_name form-control" type="text" placeholder="Type Name"></td>
    <td>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text text-muted">€</span>
            </div>
            <input name="price" id="price" class="product_subcategory_price form-control" type="number" value="0" onchange="calculateTotalPrice()" min="0" step="0.01" class="form-control @error('price') eshte jo valide @enderror" value="{{ old('price') }}" autocomplete="off" required>
        </div>
    </td>
    <td><input class="product_subcategory_amount form-control" type="number" value="1" min="1"></td>
    <td>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text text-muted">€</span>
            </div>
            <input class="product_subcategory_total form-control" value="10" disabled>
        </div>
    </td>
</tr>

После выполнения этого кода js в таблицу добавляется новый <tr>, а затем пять различных пустых <td></td> (теги данных таблицы). Я хочу новый <tr> со всеми дочерними узлами div с id = "copyRow"

1 Ответ

0 голосов
/ 02 августа 2020

Похоже, вы пытаетесь использовать содержимое <div id="copyRow"> ... </div> в качестве шаблона. ОБНОВЛЕНИЕ: если вы пытаетесь это сделать, не используйте div. Любые «специальные» теги, такие как <tr> и <td>, не могут существовать вне таблицы. Но они могут существовать вне таблицы в теге <template>.

Шаг 1. Замените div на элемент шаблона.

Итак, вместо <div id="copyRow"> ... </div> выполните <template id="copyRow"> ... </template>.

Шаг 2: Настройте метод newRow 

function newRow(id) {
  //Find the template
  var template = document.getElementById('copyRow');
  
  //Clone it's contents
  var newRow = template.content.cloneNode(true);
  
  //Find the table where the contents will be added
  var target = document.getElementById(id);
  
  //Append the new row
  target.appendChild(newRow);
}

Шаг 3: Готово

Здесь нет необходимости возиться с циклами или другими вещами.

См. Также:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

...