HTML 和 Javascript 動態表的問題

Question

我面臨以下問題：

函數saveRow不保存行。 我收到此錯誤：

未捕獲的類型錯誤：無法在 HTMLInputElement.onclick 處的 saveRow 處設置未定義的屬性名稱。 2） deleteRow不起作用。 我收到類似的錯誤：未捕獲的類型錯誤：無法設置 null 的屬性“innerHTML”。 3) 在editRow ， I 字段變為可編輯，但使用默認值作為之前保存的值。 例如，列表總是 A、B、C，這不是我想要的。 我希望列表的初始值是之前選擇的值。

我應該做錯了什么。 這是代碼：

HTML：

<html>

<head>
</head>

<body>
  <div id="wrapper">
    <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
      <thead>
        <tr>
          <th>Name</th>
          <th>Level</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="table-rows">
        <tr>
          <td><input type="text" id="name-text"></td>
          <td>
            <select name="levels-list" id="levels-list">
    <option value="A" id="option-1">A</option>
    <option value="B" id="option-2">B</option>
    <option value="C" id="option-3">C</option>
    </select>
          </td>
          <td><input type="button" class="add" value="Add Row" id="add-button"></td>
        </tr>
    </tbody>
    </table>
  </div>
<script src="get-text.js"></script>
</body>

</html>

劇本：

var myArray = [{
  "name": "aaa",
  "level": "A"
}, {
  "name": "bbb",
  "level": "B"
}, {
  "name": "ccc",
  "level": "C"
}];


display();

function display() {
  var length = myArray.length;
  var htmlText = "";

  for (var i = 0; i < length; i++) {
    htmlText +=
      "<tr id='row" + i + "'>\
                <td>" + myArray[i].name + "</td>\
                <td>" + myArray[i].level + "</td>\
                <td>\
                    <input type='button' id='edit_button" + i + "' value='Edit' class='edit' onclick='editRow("+i+")'> \
                    <input type='button' id='save_button" + i + "' value='Save' class='save' onclick='save_row(" + i + ")'> \
                    <input type='button' value='Delete' class='delete' onclick='delete_row(" + i + ")'>\
                </td>\
            </tr>";
  }//end loop
  htmlText+=
  "<tr>\
    <td><input type='text' id='name-text'></td>\
    <td>\
      <select name='levels-list' id='levels-list'>\
        <option value='A' id='option-1'>A</option>\
        <option value='B' id='option-2'>B</option>\
        <option value='C' id='option-3'>C</option>\
        </select>\
    </td>\
    <td><input type='button' class='add' value='Add Row' id='add-button' ></td>\
  </tr>";

  document.getElementById("table-rows").innerHTML = htmlText;
}//end display

var addButton=document.getElementById("add-button");
addButton.addEventListener('click', addRow, false);

function addRow(){
  event.preventDefault();
  var newData= document.getElementById("name-text").value;
  var newLevel = document.getElementById("levels-list").value;

  var table = document.getElementById("data_table");
  var tableLength = (table.rows.length)-1;
//  console.log(tableLength);
  var row = table.insertRow(tableLength).innerHTML=
   "<tr id= 'row"+tableLength+"'>\
        <td id='name-text"+tableLength+"'>"+newData+"</td>\
        <td id='levels-list"+tableLength+"'>"+newLevel+"</td>\
        <td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \
            <input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \
            <input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\
        </td>\
   </tr>";

  document.getElementById("name-text").value="";
}//end addRow

function editRow(no)
{
  document.getElementById("edit-button"+no).disabled=true;
   //document.getElementById("save-button"+no).style.display="block";

   var name=document.getElementById("name-text"+no);
   var level=document.getElementById("levels-list"+no);

   var nameData=name.innerHTML;
   var levelData=level.innerHTML;

   name.innerHTML="<input type='text' id='name_text"+no+"' value='"+nameData+"'>";
   level.innerHTML='<select id="levels-list'+no+'">\
                      <option value="A" id="option-1">A</option>\
                      <option value="B" id="option-2">B</option>\
                      <option value="C" id="option-3">C</option>\
                      </select>' ;

  document.getElementById("levels-list"+no).value = levelData;
}

function deleteRow(no) {
  myArray.splice(no, 1);
  document.getElementById("row"+no).innerHTML="";
  //display();
} //end deleteRow

function saveRow(no)
{
  myArray[no].name = document.getElementById("name-text"+no).value;
  myArray[no].level = document.getElementById("levels-list"+no).value;

  document.getElementById("row"+no).innerHTML =
  "<tr id= 'row"+no+"'>\
    <td id='name-text"+no+"'>"+myArray[no].name+"</td>\
    <td id='levels-list"+no+"'>"+myArray[no].level+"</td>\
    <td><input type='button' id='edit-button"+no+"' value='Edit' class='edit' onclick='editRow("+no+")'> \
        <input type='button' value='Delete' class='delete' onclick='deleteRow("+no+")'>\
    </td>\
   </tr>";
}//end saveRow

Answer 1

我重構了你的代碼並創建了一個新的 jsfiddle。 你可以越來越多地重構它，如果可能的話，在你的項目中插入 jQuery，你會更簡單。

所以很少注意：

1) 使您的模型與 UI 更改保持同步。 在之前的示例中，您正在操作 HTML，但沒有更新數組模型

2) 盡量將常用代碼保留在函數中，以避免重復。 例如，我移動了在函數內創建行的邏輯，並且每次需要創建新行時都調用該函數（用於在開頭和單擊添加行時顯示）

3) 當您在行中調用函數時，還要傳遞當前的 HTML 元素。 您可以傳遞它以了解當前單擊了哪個 HTML 元素，以便您可以輕松地操作該行。

4）使用兩個tbody。 一個用於數據，另一個用於操作。 更容易將數據與動作區分開來，避免每次重復該行動作

以及您可以單獨使用代碼檢查的其他一些事情。

您只需要管理在正確操作中禁用按鈕的邏輯，以避免例如在編輯時再次單擊編輯，但自己動手是一個很好的練習:)

這里的示例：

 var myArray = [{ "name": "aaa", "level": "A" }, { "name": "bbb", "level": "B" }, { "name": "ccc", "level": "C" }]; function createDataRow(el, ind) { var row = document.createElement('tr'); row.id = 'row-' + ind; var cell1Content = ` <div class="name-content">${el.name}</div> <input class="name-edit" type="text" id="name-text-${ind}" value="${el.name}" style="display:none;"> `; var cell2Content = ` <div class="level-content">${el.level}</div> <select class="level-edit" id="levels-list-${ind}" style="display:none;"> <option value="A">A</option>\\ <option value="B">B</option>\\ <option value="C">C</option>\\ </select> `; var cell3Content = ` <input type="button" id='edit_button" + i + "' value="Edit" class="edit" onclick="editRow(this, ${ind})"> <input type="button" id='save_button" + i + "' value="Save" class="save" onclick="saveRow(this, ${ind})"> <input type="button" value="Delete" class="delete" onclick="deleteRow(this, ${ind})"> `; var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = cell1Content; cell2.innerHTML = cell2Content; cell3.innerHTML = cell3Content; document.getElementById('table-data').appendChild(row); } function displayData() { myArray.forEach(function(el, ind) { createDataRow(el,ind); }); } function deleteRow(el, ind) { el.parentElement.parentElement.parentElement.removeChild(el.parentElement.parentElement); myArray.splice(ind, 1); } function addRow(){ event.preventDefault(); var newEl = { "name": document.getElementById("name-text").value, "level": document.getElementById("levels-list").value }; myArray.push(newEl); createDataRow(newEl, myArray.length - 1); document.getElementById("name-text").value = ''; document.getElementById("levels-list").value = 'A'; }//end addRow function editRow(el, ind) { var currentRow = el.parentElement.parentElement; currentRow.cells[0].getElementsByClassName("name-content")[0].style.display = 'none'; currentRow.cells[0].getElementsByClassName("name-edit")[0].style.display = 'block'; currentRow.cells[1].getElementsByClassName("level-content")[0].style.display = 'none'; currentRow.cells[1].getElementsByClassName("level-edit")[0].value = myArray[ind].level; currentRow.cells[1].getElementsByClassName("level-edit")[0].style.display = 'block'; } //end deleteRow function saveRow(el, ind) { var currentRow = el.parentElement.parentElement; var nameContent = currentRow.cells[0].getElementsByClassName("name-content")[0]; var nameEdit = currentRow.cells[0].getElementsByClassName("name-edit")[0]; nameContent.innerHTML = nameEdit.value; nameContent.style.display = 'block'; nameEdit.style.display = 'none'; var levelContent = currentRow.cells[1].getElementsByClassName("level-content")[0]; var levelEdit = currentRow.cells[1].getElementsByClassName("level-edit")[0]; levelContent.innerHTML = levelEdit.value; levelContent.style.display = 'block'; levelEdit.style.display = 'none'; myArray[ind].name = nameEdit.value; myArray[ind].level = levelEdit.value; }//end saveRow var addButton=document.getElementById("add-button"); addButton.addEventListener('click', addRow, false); displayData();

 <body> <div id="wrapper"> <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> <thead> <tr> <th>Name</th> <th>Level</th> <th>Action</th> </tr> </thead> <tbody id="table-data"> </tbody> <tbody id="table-rows"> <tr> <td><input type="text" id="name-text"></td> <td> <select name="levels-list" id="levels-list"> <option value="A" id="option-1">A</option> <option value="B" id="option-2">B</option> <option value="C" id="option-3">C</option> </select> </td> <td><input type="button" class="add" value="Add Row" id="add-button"></td> </tr> </tbody> </table> </div> </body>

這里是 jsfiddle（這次保存了：D）：

https://jsfiddle.net/u0865zaa/8/

我希望它有幫助。 如有任何疑問，請告訴我。

HTML 和 Javascript 動態表的問題

問題描述

1 個解決方案

解決方案1
0 2017-05-26 23:38:29

HTML 和 Javascript 動態表的問題

問題描述

1 個解決方案

解決方案1 0 2017-05-26 23:38:29

解決方案1
0 2017-05-26 23:38:29