通过拖放更改克隆 div 内的输入元素类

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 sn-p，它应该允许您修改克隆节点的子元素：

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

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

不使用 jQuery，您可以使用 nodeCopy.querySelector 或 nodeCopy.querySelectorAll 实现类似的效果。