Javascript 更新行中的元素后，将body标记中的表行追加到另一个表中

有人告诉我，在JavaScript中永远不要使用HTML标记是一种很好的做法。因此，我正在尽我最大的努力执行以下内容，但我没有得到我想要的

---

我有两张桌子：

表#1：我用于向其追加行的表

表#2：一个只有一行的隐藏表，我使用该行更改其内容并将其附加到表#1

---

表1

每次执行addRow（）时，都会更新所有快照，但从隐藏表中检索row元素时，它将保持为空，不变

---

请解释为什么会发生这种情况？并帮助我在不使用javascript中的html标记和插入行函数的情况下完成这项工作。

您所做的一切都是正确的，应该按照您的预期工作，除非您的

数据

对象不正确。为

数据

对象制作一个控制台，并尝试找出如何从中提取属性

函数addRow（数据）{
$（'#fname'）.text（data.fname）；
$（'#id'）.text（data.id）；
$（'#email'）.text（data.email）；
$（'#pnumber'）.text（data.pnumber）；
$（'#job'）.text（data.job）；
var row=$（'#hiddenTable tr'）.first（）.clone（）；
$（'#myTable tbody'）。追加（行）；
}
风险值数据={
fname:'名字'，
id:'12121'，
电邮:'email@gmail.com',
编号：“111111111”，
工作：“我的工作”
}
addRow（数据）
#可隐藏{
显示：无；
}

全名
身份证件
电子邮件
电话号码
职位名称
试试这个解决方案

我在addRow函数中更改了一些内容：

function addRow(data){
        $('#hiddenTable #fname').text(data.fname);
        $('#hiddenTable #id').text(data.id);
        $('#hiddenTable #email').text(data.email);
        $('#hiddenTable #pnumber').text(data.pnumber);
        $('#hiddenTable #job').text(data.job);
        var row = $('#hiddenTable tbody').html();
        $('#myTable > tbody').append(row);
    }

按照@CBroe的建议；主要问题是将重复ID分配给DOM元素。为了克服这个问题，首先将隐藏表的HTML稍微更改为使用
class
而不是
id
。请看下面的片段：


函数addRow（数据）{
//首先从隐藏表克隆行
var row=$（'hiddenTable'）.children（'tbody'）.children（'tr:first'）.clone（）；
//找到指定了唯一类的跨度，然后设置值
row.find（'.fname'）.text（data.fname）；
row.find（'.id'）.text（data.id）；
row.find（'.email'）.text（data.email）；
row.find（'.pnumber'）.text（data.pnumber）；
row.find（'.job'）.text（data.job）；
//将新形成的行追加到主表
$（'#myTable tbody'）。追加（行）；
}
$（函数（）{
变量数据1={
fname：“某个名字”，
id:“某个id”，
电子邮件：“some@email.com",
编号：“12121212”，
工作：“一些工作”
};
addRow（数据1）；
变量数据2={
fname：“一些名字22”，
id:“一些id 22”，
电子邮件：“some22@email.com",
编号：“8888888888888”，
工作：“一些工作22”
};
addRow（数据2）；
});
#可隐藏{
显示：无；
}

全名
身份证件
电子邮件
电话号码
职位名称
AAAAA
您是如何从隐藏表中检索元素的？难道
v.job
不应该是一个
数据。job
和其他作业一样吗？我觉得传递到函数中的
数据有问题。否则，除了@MikhailChurbanov指出的问题外，代码没有任何其他问题。克隆不会动态克隆设置表单元素值。另外，在执行一次代码后，您将拥有重复的ID，但ID在文档中必须是唯一的。仍然不适用于我。omg非常感谢！这实际上是可行的，我的问题是在更改数据后进行克隆。我应该先克隆，修改克隆并附加它！非常感谢你的帮助！非常感谢！通过@vijayP更正答案。我试过你以前的建议。谢谢，虽然我的问题是修改后的克隆，但这对我不起作用，我应该先克隆并修改克隆！不过还是谢谢你^^
<table id='hiddenTable'>
    <tbody>
        <tr>
            <td><span id="fname"></span></td>
            <td><span id="id"></span></td>
            <td><span id="email"></span></td>
            <td><span id="pnumber"></span></td>
            <td><span id="job"></span></td>
        </tr>
    </tbody>
</table>

function addRow(data){
    $('#fname').text(data.fname);
    $('#id').text(data.id);
    $('#email').text(data.email);
    $('#pnumber').text(data.pnumber);
    $('#job').text(data.job);
    var row = $('#hiddenTable').children('tbody').children('tr:first').clone();
    $('#myTable > tbody:last-child').append(row);
}

function addRow(data){
        $('#hiddenTable #fname').text(data.fname);
        $('#hiddenTable #id').text(data.id);
        $('#hiddenTable #email').text(data.email);
        $('#hiddenTable #pnumber').text(data.pnumber);
        $('#hiddenTable #job').text(data.job);
        var row = $('#hiddenTable tbody').html();
        $('#myTable > tbody').append(row);
    }