Javascript 在添加行时阻止表行在每行上添加

我用幻灯片制作了一张表格，表格中添加了行。。 在我尝试在顶部添加一个字段作为blcoked行之前，它似乎工作得很好。它不知怎么地被添加到每一行。。。我试着用不同的方式添加它，但似乎无法让它工作，你明白为什么吗？以下是我的代码，我使用联接使其工作：

霍韦尔海德
盖威奇
1.
2.
3.

脚本：

$('#myRange').on('change', function(event){
    var rowNum = $('#myRange').val();
    var resultHtml = '';
    for(var i = 0 ; i < rowNum ; i++) {
        resultHtml += [
            "            <tr>" ,
            "                <th scope=\"col\"></th>" ,
            "                <th scope=\"col\">Hoeveelheid</th>",
            "                <th scope=\"col\">Gewicht</th>",
            "            </tr>",



                "<tr>",
                "<td>",
                (i+1),
                "</td>",
                '<td><input type="name" placeholder="text goes here..."></td>',
                '<td><input type="name" placeholder="text goes here..."></td>',
                '</tr>'].join("\n");
    }
    $('#resultTable').html(resultHtml);
});

$（'#myRange'）。关于（'change'，函数（事件）{
var rowNum=$（'#myRange'）.val（）；
var resultHtml=''；
对于（变量i=0；i

标题行不应在循环内

$（'#myRange'）。关于（'change'，函数（事件）{
var rowNum=$（'#myRange'）.val（）；
var resultHtml=[
"            ",
"                ",
“Hoeveelheid”，
“Gewicht”，
"            "
].加入（“\n”）；
对于（变量i=0；i
const setup=（）=>{
const myRange=document.querySelector（“#myRange”）；
myRange.addEventListener（'click'，changeEvent）；
myRange.addEventListener（'change'，changeEvent）；
//加载时更新
const resultable=document.querySelector（“#resultable”）；
updateTable（可结果，myRange）；
};
常量更改事件=（事件）=>{
const target=event.target；
const resultable=document.querySelector（“#resultable”）；
可更新（可结果，目标）；
};
const updateTable=（目标、滑块）=>{
const tbody=target.querySelector（'tbody'）；
const existingRows=tbody.querySelectorAll（'tr'）；
让requestedRowsNum=parseInt（slider.value，10）；
让currentRowNum=existingRows.length；
让adjustRowNum=RequestedRownum-currentRowNum；
让金额=数学abs（adjustRowNum）；
如果（adjustRowNum>0）插入行（tbody，amount）；
否则，如果（adjustRowNum<0）删除行（tbody，amount）；
}
常量deleteRows=（tbody，amount）=>{
for（设i=0；i{
设nextRowNumber=tbody.queryselectoral（'tr'）.length；
for（设i=1；i target.appendChild（createRowHTML（rowNumber））；
const createRowHTML=（rowNumber）=>{
const tr=document.createElement（'tr'）；
设cel1=document.createElement（'td'）；
cel1.textContent=行数；
设cel2=createCellWithInput（）；
设cel3=createCellWithInput（）；
tr.appendChild（cel1）；
tr.appendChild（cel2）；
tr.appendChild（cel3）；
返回tr；
};
const createCellWithInput=（）=>{
const cell=document.createElement（'td'）；
常量输入=document.createElement（'input'）；
input.placeholder='文本放在这里…'；
附加子单元（输入）；
返回单元；
};
//装载
window.addEventListener（'load'，setup）；

tableRowCreationSlider
霍韦尔海德
盖威奇
1.
2.
3.

$('#myRange').on('change', function(event){
    var rowNum = $('#myRange').val();
    var resultHtml = '';
    for(var i = 0 ; i < rowNum ; i++) {
        resultHtml += [
            "            <tr>" ,
            "                <th scope=\"col\"></th>" ,
            "                <th scope=\"col\">Hoeveelheid</th>",
            "                <th scope=\"col\">Gewicht</th>",
            "            </tr>",



                "<tr>",
                "<td>",
                (i+1),
                "</td>",
                '<td><input type="name" placeholder="text goes here..."></td>',
                '<td><input type="name" placeholder="text goes here..."></td>',
                '</tr>'].join("\n");
    }
    $('#resultTable').html(resultHtml);
});