2017-01-26 8 views
-1

私はjavascriptコアで新しくなっていますが、テーブルから行を削除したいのですが、新しい行を追加した後にそれらを削除したいのです。その後、私はconsole.log()を使ってみましたが、どうしたら問題を解決できますか?一度削除するとアイテムが戻ってきます

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Practica #1</title> 
</head> 
<body> 
     <form id="frmLibros" onsubmit="return false"> 
      <div> 
       <label for="">Nombre:</label><br> 
       <input type="text" id="nombre_libro" name="nombre_libro"> 
      </div> 

      <div> 
       <label for="">Autor:</label> 
       <input type="text" id="autor" name="autor"> 
      </div> 

      <div> 
       <label for="">Genero:</label> 
       <select name="genero" id="genero"> 
        <option value="Comedia">Comedia</option> 
        <option value="Terror">Terror</option> 
        <option value="Historia">Historia</option> 
       </select> 
      </div> 
      <button id="agregar_libro">Agregar</button> 
     </form> 
     <table id="myTable"> 
      <thead> 
       <tr> 
        <th>Nombre</th> 
        <th>Autor</th> 
        <th>Genero</th> 
        <th>&nbsp;</th> 
       </tr> 
      </thead> 
      <tbody id="libros"></tbody> 
     </table> 
</body> 
<script type="text/javascript"> 
    var tablaLibros = document.getElementById("libros"); 
    var txtLibro = document.getElementById("nombre_libro"); 
    var txtAutor = document.getElementById("autor"); 
    var cmbGenero = document.getElementById("genero"); 
    var btnAgregar = document.getElementById("agregar_libro"); 
    var libros = []; 
    var id = 1; 
    var idLibro = 0; 

    function editarLibro(){ 

     var book = this.libro; 
     idLibro = book.id; 
     txtLibro.value = book.nombre_libro; 
     txtAutor.value = book.autor; 
     cmbGenero . value = book.genero; 
     btnAgregar.textContent = "Modificar"; 
    } 

    function eliminar(){ 
     document.getElementById('myTable').deleteRow(this.parentNode.parentNode.rowIndex) 
    } 

    function agregarLibro(){ 
     var libro = txtLibro.value; 
     var autor = txtAutor.value; 
     var genero = cmbGenero.value; 
     txtLibro.value = ""; 
     txtAutor.value = ""; 

     if (idLibro == 0) { 
     var item = { 
      id: id, 
      nombre_libro: libro, 
      autor: autor, 
      genero: genero 
     }; 
     id++; 
     libros.push(item); 
    }else{ 
     for (var i = 0; i < libros.length; i++) { 
      if (idLibro == libros[i].id) { 
       libros[i].nombre_libro = libro; 
       libros[i].autor = autor; 
       libros[i].genero = genero; 
      } 
     } 
     idLibro = 0; 
     btnAgregar.textContent = "Insertar"; 
    } 
     while (tablaLibros.childElementCount >0){ 
      tablaLibros.removeChild(tablaLibros.firstChild); 
     } 

     for (var i = 0; i < libros.length; i++) { 

      var tr = document.createElement('tr'); 
      var td = document.createElement('td'); 
      var td1 = document.createElement('td'); 
      var td2 = document.createElement('td'); 
      var td3 = document.createElement('td'); 

      tr.appendChild(td); 
      td.textContent = libros[i].nombre_libro; 
      td.libro = libros[i]; 
      td.addEventListener('click', editarLibro); 

      tr.appendChild(td1); 
      td1.textContent = libros[i].autor; 
      td1.libro = libros[i]; 
      td1.addEventListener('click', editarLibro); 

      tr.appendChild(td2); 
      td2.textContent = libros[i].genero; 
      td2.libro = libros[i]; 
      td2.addEventListener('click', editarLibro); 

      var btnEliminar = document.createElement('button'); 
      btnEliminar.textContent = 'trash'; 
      btnEliminar.libro = libros[i]; 
      btnEliminar.addEventListener('click', eliminar); 
      tr.appendChild(td3); 
      td3.appendChild(btnEliminar); 

      tablaLibros.appendChild(tr); 
     } 
    } 
    btnAgregar.addEventListener('click', agregarLibro); 
</script> 
</html> 
+1

'私は新しいone'を追加したら、それらを再度それらをバック削除したい - あなたはこの文を書き換えるしようとすることができ、ほとんど意味がありませんで –

答えて

0

テーブル要素は削除していますが、配列要素は削除していません。あなたの関数のeliminarが次のように変更します。

function eliminar(){ 
    var row = document.getElementById('myTable'); 
    libros.splice(libros.indexOf(row), 1); 
    row.deleteRow(this.parentNode.parentNode.rowIndex); 
} 

Plunker:http://plnkr.co/edit/JkprJik58mewwFx3KmO1?p=preview

関連する問題