我无法使用函数通过 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){&nbsp; &nbsp; nameValue = document.getElementById('newname').value;&nbsp; &nbsp; if(nameValue === ""){&nbsp; &nbsp; &nbsp; $('.nameinput').attr('style', "border-raidus: 5px; border:#C21414 1px solid;");&nbsp; &nbsp; &nbsp; $('#newname').attr('placeholder', "Ange nytt namn").placeholder();&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; people[i] = nameValue;&nbsp; &nbsp; &nbsp; &nbsp; listNames();&nbsp; &nbsp; }}然后更改 HTML，以便将其i作为参数传递给函数。&nbsp; &nbsp; &nbsp; 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.