Problemas con la tabla dinámica HTML y JavaScript

Question

May 27, 2017, 12:28 AM

javascript html javascript-events html-table

Problemas con la tabla dinámica HTML y JavaScript

Estoy enfrentando problemas en: 1) la función saveRow no guarda la fila. Me sale este error:Uncaught TypeError: Cannot set property name of undefined at at saveRow at HTMLInputElement.onclick. 2) eldeleteRow No funciona. Me sale un error similar:Uncaught TypeError: Cannot set property 'innerHTML' of null. 3) en editRow, los campos se vuelven editables, pero con los valores predeterminados como los que se guardaron antes. Por ejemplo, la lista siempre es A, B, C, que no es lo que quiero. Quiero que el valor inicial de la lista sea el seleccionado anteriormente. Debería haber algo mal que estoy haciendo. Aquí está el código:

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>

La secuencia de comandos:

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