我想用缺省值克隆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++;
  }
});