Javascript 我想将第二个表中的新数据添加到主表中

我想使用复选框选项向主表添加新数据，但添加的数据与所选数据不同。这是我的密码

<table border="1" id="table2">
            <tr>
                <td>Raka</td>
                <input type="hidden" id="fname" value="Raka">
                <td>Gilbert</td>
                <input type="hidden" id="lname" value="Gilbert">
                <td><input type="checkbox" name="chk"></td>
            </tr>
            <tr>
                <td>Achyar</td>
                <input type="hidden" id="fname" value="Achyar">
                <td>Lucas</td>
                <input type="hidden" id="lname" value="Lucas">
                <td><input type="checkbox" name="chk"></td>
            </tr>
    </table>

拉卡
吉尔伯特
阿契亚人
卢卡斯

$（文档）。在（'单击'，'添加'，函数（）上）{
$（“表”）.find（'input[name=“chk”]”）。每个（函数（）{
如果（$（this）.is（“：checked”））{
var fname=$（'#fname'）.val（）；
var lname=$（'#lname'）.val（）；
var newData=''+
''+fname+''的+
“+lname+”+
'';
$（'table'）。追加（newData）；
}
});
})

试试这个。我使用了纯javascript

document.addEventListener("click", function() {
  [...document.querySelectorAll("input[name='chk']")].forEach(data => {
    console.log(data);
    if (data.checked) {
      const fname = document.getElementById("fname").value;
      const lname = document.getElementById("lname").value;

      const newData = `<tr><td>${ fname }</td><td>${ lname }</td</tr>`;
        // "<tr>" + "<td>" + fname + "</td>" + "<td>" + lname + "</td>" + "<tr>";
      document.getElementById("table2").innerHTML += newData;
    }
  });
});

document.addEventListener（“单击”，函数（）{
[…document.queryselectoral（“输入[name='chk']”]）.forEach（数据=>{
控制台日志（数据）；
如果（数据已选中）{
const fname=document.getElementById（“fname”）.value；
const lname=document.getElementById（“lname”）.value；
const newData=`${fname}${lname}您需要将
id=“fname”
更改为
class=“fname”
，并获取与复选框最接近的输入值。当前，您从第一个输入获取数据，因为它们具有相同的id


函数值存在（值）{
如果（！值）{
返回true；
}
让存在=虚假；
$（“#主表”）.find（'tr'）.each（函数（）{
设fname=$（this）.find（“td:nth child（1）”）.text（），
lname=$（this.find（“td:nth child（2）”）.text（）；
const fullName=`${fname}${lname}`；
if（value.toLowerCase（）==fullName.toLowerCase（））{
存在=真；
}
});
回报存在；
}
$（文档）。在（'单击'，'添加'，函数（）上）{
$（“table”）.find（'input[name=“chk”]”）。每个（函数（e）{
如果（$（this）.is（“：checked”））{
var fname=$（this.parents（'tr'）.find（'.fname'）.val（）；
var lname=$（this.parents（'tr'）.find（'.lname'）.val（）；
if（valueExists（`${fname}${lname}`））返回；
var newData=''+
''+fname+''的+
“+lname+”+
'';
$（“#主表”）.append（newData）；
}
});
})

主表

第二桌
拉卡
吉尔伯特
阿契亚人
卢卡斯
Add
这是一个更简洁的解决方案，根据请求使用两个表，没有隐藏的输入，并且在jquery中更好地使用了“tables”和“trs”


$（函数（）{
$（“#btnAdd”）。单击（函数（）{
设表1=$（“#表1”）；
表2=$（“表2”）；
$.each（表2.find（'tr'），函数（i，tr）{
tr=$（tr）；
设new_tr=$（''）；
如果（tr.find（“td输入”）为（“：选中”））{
让fname=tr.find（“td:nth child（1）”）.html（），
lname=tr.find（“td:nth-child（2）”）.html（）；
新的(
''+fname+''的+
“+lname+”+
''
);
表1.追加（新增）
}
})
});
})；

表1

表2
拉卡
吉尔伯特
阿契亚人
卢卡斯
添加
您有多个元素具有相同的id属性，这就是为什么它不会这样工作的原因谢谢您的回答，但这对我不起作用。当我单击第二个数据时，数据显示在第一个数据中。如果要添加的数据已经存在，则必须禁用复选框。我应该更改什么？非常感谢您的回答。tha这很有帮助。
document.addEventListener("click", function() {
  [...document.querySelectorAll("input[name='chk']")].forEach(data => {
    console.log(data);
    if (data.checked) {
      const fname = document.getElementById("fname").value;
      const lname = document.getElementById("lname").value;

      const newData = `<tr><td>${ fname }</td><td>${ lname }</td</tr>`;
        // "<tr>" + "<td>" + fname + "</td>" + "<td>" + lname + "</td>" + "<tr>";
      document.getElementById("table2").innerHTML += newData;
    }
  });
});