Я хочу клонировать со значениями по умолчанию clonenode()

Question

Я хочу сделать, это клонировать строку в таблице. Вот код:

function addRow(){ 
    var x=document.getElementById("insertar").tBodies[0];  //get the table
    var node=x.rows[1].cloneNode(true);    //clone the previous node or row
    x.appendChild(node);   //add the node or row to the table
}

Я просто не хочу клонировать этот раздел, потому что, когда я добавляю данные в первый ряд, когда вы клонируете, данные также клонируются. Я помял код HTML:

<table id='insertar'>
                <tr><td>Producto</td><td>Stock</td><td>Cantidad</td></tr>
                <?php 
                $numeroItems = 1;
                try{
                    $prod = array();
                    $param = array('TIPOP'=> 'Productos');
                    $ready = $client->MOSTRARPRODUCTOS($param)->MOSTRARPRODUCTOSRESULT;
                    array_push($prod,$ready->PRODUCTOS);
                }catch(Exception $e){
                    echo $e->getMessage();
                }
                echo "
                <tr><td>
                <select id='p' name='producto[]' onChange='document.getElementById(\"stock\").value = setStock()' >";
                echo "<option value='' >---------</option>";
                if(count($ready->PRODUCTOS)>1){
                    for($j = 0;$j < (count($ready->PRODUCTOS)); $j++){
                        if($ready->PRODUCTOS[$j]->GRUPO==$_GET['grupo']){
                            echo "<option value=".trim($ready->PRODUCTOS[$j]->CODIGOP)." >".trim($ready->PRODUCTOS[$j]->CODIGOP)."</option>";
                        }
                    }
                }
                echo "
                </select><br />
                </td>
                <td><input type='text' id='stock' value='' name='stock[]' readonly></input></td>
                <td><input type='text' name='cantidad[]' required></input></td></tr>";
                ?>
            </table>
            <a href="#" onclick="addRow()" >Agregar otro</a>

Теперь я хочу изменить атрибуты td, чтобы они были уникальными, как бы вы? Пример клонов:

<tr><td>.....</td><td id="stock1" ...></td></tr>
<tr><td>.....</td><td id="stock2" ...></td></tr>
<tr><td>.....</td><td id="stock3" ...></td></tr>
Etc...

Answer 1

Вы должны клонировать ваш узел по умолчанию прямо перед его изменением. Потом откинуться default по мере необходимости в вашем addRow,

var _default;
window.onload = function(){
  _default = document.getElementById('defaultNode').cloneNode(true);
}

вот так:

function addRow(){ 
    var x=document.getElementById("insertar").tBodies[0];  //get the table
    x.appendChild(_default);   //add the node or row to the table
}

---

Ваше предлагаемое рабочее решение:

var _default;
window.onload = function() {
  var x = document.getElementById("insertar").tBodies[0];
  _default = x.rows[1].cloneNode(true);
}

Edit2:

var counter = 1;
function addRow(){ 
    var _cloned_default = _default.cloneNode(true);
    _cloned_default.id = "stock" + counter;
    counter++;
    x.appendChild(_cloned_default);   //add the node or row to the table
}

Просто получите элемент td в свой клонированный элемент:

Array.prototype.slice.call(_cloned_node.childNodes, 0).forEach(function(value){
    //making sure it's a node and nothing else
    if(value.nodeType === 1){
        //change id here
        value.id = counter;
        counter++;
  }
});