Question

我正在尝试通过每行上的编辑按钮更新表数据，添加功能运行良好，它在最后一行添加了一行，删除按钮删除了一行，但是当我单击更新时，我就拥有了这个未定义的d .name错误。

当NaN条件下将StudentObject推出时，我没有此错误。但是当时它也没有更新。它在最后一行添加了

var newStudentsObject = [];
var studentsObject = [{
  name: 'Mehwish',
  age: 26,
  email: 'mehwish@gmail.com',
  action: ' '
}, {
  name: 'Robert',
  age: 28,
  email: 'robert@gmail.com',
  action: ' '
}, {
  name: 'chris',
  age: 29,
  email: 'chris@gmail.com',
  action: ' '
}, {
  name: 'john',
  age: 28,
  email: 'john@gmail.com',
  action: ' '
}, {
  name: 'martin',
  age: 24,
  email: 'martin@gmail.com',
  action: ' '
}, {
  name: 'joseph',
  age: 24,
  email: 'joseph@gmail.com',
  action: ' '
}, {
  name: 'morgan',
  age: 38,
  email: 'morgan@gmail.com',
  action: ' '
}, {
  name: 'ervin',
  age: 31,
  email: 'ervin@gmail.com',
  action: ' '
}, {
  name: 'smith',
  age: 28,
  email: 'smith@gmail.com',
  action: ' '
}, {
  name: 'kane',
  age: 28,
  email: 'kane@gmail.com',
  action: ' '
}];

var helloDom = document.getElementById('hello-dom');

function renderTable() {

  helloDom.innerHTML = "";
  helloDom.innerText = 'Hello World';
  helloDom.innerHTML = '<p>Hello World 2</p>';

  const para = document.createElement('h6');
  para.innerText = 'JS is very difficult';
  helloDom.appendChild(para);

  console.log('helloDom: ', helloDom);

  var tableDiv = document.createElement("table");
  var tableHead = document.createElement("thead");
  let tableBody = document.createElement("tbody");

  for (let k = 0; k < studentsObject.length; k++) {

    if (k === 0) {
      var tableHeadRow = document.createElement("tr");
      tableHead.appendChild(tableHeadRow);
    }

    tableHead.appendChild(tableHeadRow);
    let tableRow = document.createElement('tr');


    for (let key in studentsObject[k]) {
      if (k === 0) {
        var tableHeadData = document.createElement('th');

        tableHeadData.innerText = key;

        var n = key.length;
        tableHeadRow.appendChild(tableHeadData);

        key.split('');

        function titleCase(key) {
          var splitStr = key.toLowerCase().split(' ');
          for (var m = 0; m < splitStr.length; m++) {
            splitStr[m] = splitStr[m].charAt(0).toUpperCase() + splitStr[m].substring(1);
          }
          return splitStr.join(' ');
        }
        console.log(titleCase(key));
        tableHeadData.innerText = titleCase(key);
      }

      var tableColumn = document.createElement('td');
      tableColumn.innerText = studentsObject[k][key];
      tableRow.appendChild(tableColumn);
    }

    var tableHeadDataEdit = document.createElement('button');
    tableHeadDataEdit.innerText = "Edit";
    var tableHeadDataDelete = document.createElement('button');
    tableHeadDataDelete.innerText = "Delete";
    tableColumn.appendChild(tableHeadDataEdit);
    tableColumn.appendChild(tableHeadDataDelete);


    tableHeadDataDelete.onclick = function() {
      studentsObject.splice(k, 1);
      renderTable();
    };

    tableHeadDataEdit.onclick = function() {
      document.getElementById('addButton').innerText = "Update";
      updateStudent(studentsObject[k], k);
    };

    tableBody.appendChild(tableRow);
  }
  tableDiv.appendChild(tableHead);
  tableDiv.appendChild(tableBody);
  helloDom.appendChild(tableDiv);

}

renderTable();

function addStudent(e) {
  e.preventDefault();

  const nameStudent = document.getElementById('studentName');
  const ageStudent = document.getElementById('studentAge');
  const emailStudent = document.getElementById('studentEmail');

  const studentFormSubmit = document.getElementById('addButton');

  console.log('add: ');
  console.log(nameStudent);
  console.log(ageStudent);
  console.log(emailStudent);

  const studentForm = document.getElementById('student-form');
  if (isNaN(studentForm.dataset.rowIndex)) {
    alert("clicked on add button");

    studentsObject.push({
      name: nameStudent.value,
      age: ageStudent.value,
      email: emailStudent.value
    });

    nameStudent.value = '';
    ageStudent.value = '';
    emailStudent.value = '';
    renderTable();


  } else {
    alert("updating?");
    studentFormSubmit.innerText = "Add";

    nameStudent.value = '';
    ageStudent.value = '';
    emailStudent.value = '';

    renderTable();
    updateStudent();
  }

}

function updateStudent(d, k) {
  const nameStudent = document.getElementById('studentName');
  const ageStudent = document.getElementById('studentAge');
  const emailStudent = document.getElementById('studentEmail');

  const studentForm = document.getElementById('student-form');
  const studentFormSubmit = document.getElementById('addButton');
  studentForm.dataset.rowIndex = k;
  console.log(studentsObject[k]);

  console.log(newStudentsObject[k]);
  nameStudent.value = d.name;
  ageStudent.value = d.age;
  emailStudent.value = d.email;
}

<form id="student-form" data-row-index="undefined">
  <input type="text" id="studentName" placeholder="Enter Student Name" />
  <input type="text" id="studentAge" placeholder="Enter Age" />
  <input type="email" id="studentEmail" placeholder="Enter Email" />
  <button type="submit" onclick="addStudent(event)" id="addButton">Add</button>
</form>
<div id="hello-dom">
  Hello
</div>

它应该编辑从顶部单击更新按钮后单击的行。但是我有这个错误未捕获的TypeError：无法读取未定义的属性“名称”

如何解决CRUD JavaScript表中的未定义错误？

0 个答案: