时间戳

首页 > 解决方案 > 我无法使用函数通过 DOM 编辑（拼接）我的数组中的特定索引

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

问题描述

所以我想改变一个特定的索引，例如“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 也可以。

标签： javascriptjqueryarraysfunctiondom

解决方案

更改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.

推荐阅读