下午好,我的程序是一个添加行的表,当我按 Enter 插入数据时,我的问题是,当我尝试删除没有输入数据的行时,它会删除已经插入其他数据的行, 举个例子:
我已经在表中插入了两行中的数据,但是我不小心又打开了一行,当我想删除它时,它会删除另外两行已经在表中插入数据的行。
请我需要你的帮助,这是我的代码:
$(document).ready(function() {
$('#bt_add').click(function() {
agregar();
});
$('#bt_del').click(function() {
eliminar(id_fila_selected);
});
$('#bt_delall').click(function() {
eliminarTodasFilas();
});
});
var cont = 0;
var id_fila_selected = [];
function agregar() {
cont++;
var fila =
'<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td> </td>' +
'<td><input type="text" id="nombre"></td>' +
'<td><input type="text" id="area"></td>' +
'<td><input type="text" id="puesto"></td>' +
'<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';
$('#tabla').append(fila);
reordenar();
}
/*
* Esta función agrega lo ingresado a la tabla
*/
function addToTable(e) {
if (e.keyCode === 13) {
e.preventDefault();
const row = e.target.parentNode.parentNode;
const inputs = row.querySelectorAll('input');
const values = [].map.call(inputs, input => input.value);
const tds = row.querySelectorAll('td');
[].forEach.call(tds, (td, i) => {
if (i === 0) { td.textContent = i + 1; }
else { td.innerHTML = values[i - 1]; }
});
}
}
function seleccionar(id_fila) {
if ($('#' + id_fila).hasClass('seleccionada')) {
$('#' + id_fila).removeClass('seleccionada');
} else {
$('#' + id_fila).addClass('seleccionada');
}
//2702id_fila_selected=id_fila;
id_fila_selected.push(id_fila);
}
function eliminar(id_fila) {
/*$('#'+id_fila).remove();
reordenar();*/
for (var i = 0; i < id_fila.length; i++) {
$('#' + id_fila[i]).remove();
}
reordenar();
}
function reordenar() {
var num = 1;
$('#tabla tbody tr').each(function() {
$(this).find('td').eq(0).text(num);
num++;
});
}
function eliminarTodasFilas() {
$('#tabla tbody tr').each(function() {
$(this).remove();
});
}
#content {
position: absolute;
min-height: 50%;
width: 80%;
top: 20%;
left: 5%;
}
.selected {
cursor: pointer;
}
.selected:hover {
background-color: #0585C0;
}
.seleccionada {
background-color: #0585C0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="content">
<label> Tabla de Ejemplo </label>
<br>
<button id="bt_add" class="btn btn-default">Agregar</button>
<button id="bt_del" class="btn btn-default">Eliminar</button>
<button id="bt_delall" class="btn btn-default">Eliminar todo</button>
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<td>Nº</td>
<td>NOMBRE</td>
<td>AREA</td>
<td>PUESTO</td>
<td>EMAIL</td>
</tr>
</thead>
</table>
</div>
如果它被选中,它只是将 id 添加到数组中,如果它已经被选中,它会删除 id,如下所示:
并且当您调用时
eliminar()
,不需要传递id_row_selected参数,因为您在下面将其声明为全局变量。问题出在您的阵列中,每次您选择一个
input
时,它都会再次添加到您的阵列中,这里有必要验证它是否被添加。为此,我使用
$.inArray('element',arreglo)
并且如果删除了选定的元素,我将使用.splice(index,1)
,因此 select 函数将添加以下内容:但是现在还有一个问题,就是删除选中的元素后数组没有清空:
通过这些更改,您的问题得到解决。