我无法使用函数通过 DOM 编辑（拼接）我的数组中的特定索引

Question

所以我想改变一个特定的索引，例如“Lisa”，我想通过我创建的DOM来做到这一点。正如你可以看到我使用一个循环来获取每个<tr>并<td>作为一个表。我也在做的是给他们每个人一个id='edit"+[i]+"'我试图将每个数组与每个 id 组合在一起，因为它们总是循环在一起。var people = ["Olle", "Lisa", "Kalle", "Elin", "Johan", "Linda"];```function listNames(){  varMyinnerHTLM = "<table class='nametable table table-dark table-hover'>";  varMyinnerHTLM += "<tbody>";  varMyinnerHTLM += "<tr><th>Namn</th></tr>";    for(i=0;i<people.length;i++){ //Loopar ut arrayens namn som en lista.      varMyinnerHTLM += "<tr><td><a href='#'>"+people[i]+"</a><button type='button' id='edit"+[i]+"' class='close' aria-label='Close'onClick='edit()'><span aria-hidden='true'>&#x270f;</span></button><button id='close"+[i]+"' type='button' class='close' aria-label='Close' onClick='removeRow()'><span aria-hidden='true'>&times;</span></button></td></tr>";    }  varMyinnerHTLM + "</tbody>";  varMyinnerHTLM += "</table>";  varMyinnerHTLM += "<input type='text' id='newname' class='nameinput input-group-text' placeholder='Namnet på personen'></br>";  varMyinnerHTLM += "<button type='button' id='addName' class='btn btn-primary' onClick='addName()'>Lägg till</button>";  varMyinnerHTLM += "<button type='button' id='reset' class='btn btn-light' onClick='reset()'>Nollställ</button>";  varMyinnerHTLM += "<button type='button' class='hide btn btn-success' onClick=''>Godkän</button>";  document.getElementById("jspage").innerHTML = varMyinnerHTLM;}所以我想要实现的是我希望能够通过某种onClick = "function()"方式编辑我的数组中的特定索引。必须在输入中给出该值，然后该函数edit()将继续执行以下操作：var fullid = people[i] + edit[i]function edit(){    nameValue = document.getElementById('newname').value;    if(nameValue === ""){      $('.nameinput').attr('style', "border-raidus: 5px; border:#C21414 1px solid;");    }else{        people.splice(fullid, 1, nameValue);        return listNames();    }}也许它明显与否，但我认为我people.splice(fullid, 1, nameValue);的方法是错误的，但可能是错误的。因为目前它只编辑我的数组的第一个索引，这是Olle我想要编辑的时候Lisa。我希望这足以理解我的动机。我想用 javascript 解决它，但如果它使用 jquery 也可以。

Answer 1

更改edit()函数，使其将数组索引作为参数。splice()如果您只是更改 1 个元素，则无需使用，只需分配给数组索引即可。

function edit(i){

    nameValue = document.getElementById('newname').value;

    if(nameValue === ""){

      $('.nameinput').attr('style', "border-raidus: 5px; border:#C21414 1px solid;");

      $('#newname').attr('placeholder', "Ange nytt namn").placeholder();

    }else{

        people[i] = nameValue;

        listNames();

    }

}

然后更改 HTML，以便将其i作为参数传递给函数。

      varMyinnerHTLM += "<tr><td><a href='#'>"+people[i]+"</a><button type='button' id='edit"+[i]+"' class='close' aria-label='Close'onClick='edit(" + i + ")'><span aria-hidden='true'>&#x270f;</span></button><button id='close"+[i]+"' type='button' class='close' aria-label='Close' onClick='removeRow()'><span aria-hidden='true'>&times;</span></button></td></tr>";

我不确定你为什么要从 中返回一些东西edit()，返回值不用于任何东西。并且listNames()不返回任何东西。只需调用listNames()而不使用return.