Question

我有两列。左侧的列加载矩形div，这些div内部是5个输入元素，通过PHP加载数据。用户可以将div从左列拖到右列。这将克隆它，用户可以开始编辑输入元素。我克隆后可以更改父div的ID，但是在更改克隆div中输入元素的类名时遇到了麻烦。我将通过ajax保存它们，并将构建一个属于每个类名的所有值的数组。克隆的类名必须与原始名称不同，以便不捕获原始数据。

这是用户可以拖动和克隆的其中一个div的示例。还没有PHP。

<div class='pcaccount' draggable="true" id='account' data-id='accountid' ondragstart="drag(event)" >    
               <table  class='tablesorter'>
                    <thead id='accountrow'>
                        <th align='center'>
                            <input type='text' value='hello' class='owner' >
                        </th>
                        <th align='center'>
                            <input type='text' value='hello' class='custodian'  >
                        </th>
                        <th align='center'>
                            <input type='text' value='hello' class='type' >
                        </th>
                        <th align='center'>
                            <input type='text' value='hello' class='tax' >
                        </th>
                        <th align='center'>
                            <input type='text' value='hello' class='accvalue' >
                        </th>
                    </thead>
                </table>
            </div>

这是我目前的JS。它适用于拖放，删除，克隆和更改父DIV的ID，但我似乎无法更改div中输入元素的类。

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("div", ev.target.id);
var i = 0;
}

function drop(ev) { 
var newId = 'newaccount';
ev.preventDefault();
var data=ev.dataTransfer.getData("div");
var nodeCopy = document.getElementById(data).cloneNode(true);
nodeCopy.id = newId+i; 
nodeCopy.class = 'newaccount';
ev.target.appendChild(nodeCopy);
i++;
}

我忽略了包含我试图将其作为垃圾来实现的任何代码。任何有关这方面的帮助将不胜感激。此外，有必要更改“thead”的ID，因为我想在克隆后附加另一个表头。

非常感谢提前。

Answer 1

由于您使用jQuery标记了问题，因此这里有一个jQuery代码段，它允许您修改克隆节点的子元素：

$('input', nodeCopy).each(function () {
    $(this).removeClass(...).addClass(...);
});

$('thead', nodeCopy).each(function () {
    $(this)[0].id = ...;
});

如果没有jQuery，您可以使用nodeCopy.querySelector或nodeCopy.querySelectorAll来实现类似的功能。

使用drag＆amp; amp;更改克隆div内的输入元素类。下降

1 个答案: