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

【问题标题】：I cant edit(splice) a specific index in my array through DOM, using a function我无法使用函数通过 DOM 编辑（拼接）我的数组中的特定索引
【发布时间】：2020-03-17 06:35:22
【问题描述】：

所以我想更改例如“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); 是错误的，但可能是错误的。因为目前它只编辑我的数组的第一个索引Olle，当我想编辑Lisa 例如。

我希望这足以理解我的动机。我想用 javascript 解决它，但如果它使用 jquery 也可以。

【问题讨论】：

people[i] + edit[i] 应该是什么？ i 变量在哪里？而edit 是一个函数，而不是一个数组。
spilce 使用索引作为第一个参数，不要以为你在这样做。
抱歉，如果这有点令人困惑，第一次在这里。 people[i] + edit[i] 是我尝试将 var people 中的每个索引与我的 dom 中的每个 id='edit"+[i]+"' 结合起来的一种糟糕方法。我想让function edit() 知道它应该编辑哪个索引，但我似乎无法让它工作。

标签： javascript jquery arrays function dom

【解决方案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。

【讨论】：