Question

我创建了一个Crud应用程序，并具有一个接受Json的data（）

.map

作为输入。

当我调用editUser（）时，未获取数组索引。

但是当我通过控制台静态传递数组索引时，该函数可以正常工作。

我该如何纠正错误？我还有一个updateUser（），它也面临相同的问题。

user = {name: name,  age: age, email: email,  dob: do}

function read(users) {

  var html = "<table border='1|1' class=\"table container\">";
  var userhtml = document.getElementById('user');
  userhtml.innerHTML = '';

  var t = Object.keys(users[0]);

  for (var i = 0; i <= 0; i++) {

    html += "<tr>";
    html += "<th>" + t[0] + "</th>";
    html += "<th>" + t[1] + "</th>";
    html += "<th>" + t[2] + "</th>";
    html += "<th>" + t[3] + "</th>";
    html += "<th>" + " Edit" + "</th>";
    html += "<th>" + "Delete" + " </th>";
    html += "</tr>"
    for (var j = i; j < users.length; j++) {
      html += "<tr>";
      html += "<td>" + users[j].name + "</td>";
      html += "<td>" + users[j].age + "</td>";
      html += "<td>" + users[j].email + "</td>";
      html += "<td>" + users[j].dob + "</td>";

      html += "<td>" + "<a href='#' onclick='editUser()'>Edit</a>" + "</td>";
      html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";

      html += "</tr>";
    }
    html += "</table>";
    document.getElementById("user").innerHTML = html;
  }
}

function editUser(index) {
  debugger;
  var userhtml1 = document.getElementById('edit');
  userhtml1.innerHTML = '';
  for (var i = 0; i < users.length; i++) {
    if (i == index) {
      userhtml1.innerHTML += ' <div class="user"> Name :<input id="EditName" type="text" value ="' + users[i].name + '"><br />' +
        'Age :<input id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
        'Email :<input id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
        'DOB :<input id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
        '<button class="edit" onclick="updateUser()">Update</button>';
    } else {

      userhtml1.innerHTML += '';
    }
  }
}
 function updateUser(index) {
        debugger;
        var updatename = document.getElementById('EditName').value;
        var updateage = document.getElementById('EditAge').value;
        var updateemail = document.getElementById('EditEmail').value;
        var updatedob = document.getElementById('EditDOB').value;

        if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
            alert("Please Fill the Fields!");
        }
        else {
            users[index].name = updatename;
            users[index].email = updateemail;
            users[index].age = updateage;
            users[index].dob = updatedob;
            read(users);
        }
    }

Answer 1

您只是忘记了传递参数。请尝试以下操作：

// Change this line
html += "<td>" + "<a href='#' onclick='editUser()'>Edit</a>" + "</td>";

// For this one
html += "<td>" + "<a href='#' onclick='editUser("+j+")'>Edit</a>" + "</td>";

此外，请注意，您的for语句仅执行一次。.您可以删除它，而使内部代码保持不变。

// This executes only once, no matter what.
for (var i = 0; i <= 0; i++) { // <-- remove this
  // your code..
} // <-- remove this

// Because it would be the same as just doing:
// your code..

针对updateUser问题进行编辑：

// For the updateUser problem, note that I added the i variable for the call:
userhtml1.innerHTML += ' <div class="user"> Name :<input id="EditName" type="text" value ="' + users[i].name + '"><br />' +
        'Age :<input id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
        'Email :<input id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
        'DOB :<input id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
        '<button class="edit" onclick="updateUser('+i+')">Update</button>';

JavaScript函数未将数组索引返回为未定义

1 个答案: