-1
Ich bin neu mit JavaScript-Core, aber ich möchte die Zeile aus meiner Tabelle löschen, aber ich möchte sie wieder löschen, sobald ich ein neues hinzufügen. dann habe ich versucht mit console.log() aber nichts scheint falsch, wie kann ich es beheben?Warum bekomme ich meine Artikel zurück, wenn ich sie gelöscht habe?
<!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> </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>
'ich löschen wollen, dass sie sie wieder zurück, sobald ich eine neue one' hinzufügen - können Sie versuchen, den Satz zu umschreiben, in wenig Sinn macht, –