我无法使用函数通过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;");
$('#newname').attr('placeholder', "Ange nytt namn").placeholder();
}else{
people.splice(fullid, 1, nameValue);
return listNames();
}
}

也许这是显而易见的，但我认为我的people.splice(fullid, 1, nameValue);是错误的，但可能是错误的。因为目前，当我想编辑Lisa时，它只编辑我数组的第一个索引，即Olle，例如

我希望它足够清楚，可以理解我的动机。我想用javascript解决它，但如果它与jquery配合使用，它也能工作。

Answer 1

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

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。