1

buenas tardes, mi programa se trata de una tabla que agrega filas y al dar enter insertar los datos en la misma, mi problema es que cuando trato de borrar una fila que no tiene ningún dato ingresado borra las filas que ya tienen insertada los demás datos, como un ejemplo:

Tengo en dos filas ya insertadas en la tabla los datos, pero abro por accidente una fila de mas y al querer borrarla borra las otras dos fila que tiene los datos ya insertados en la tabla.

Por favor necesito de su ayuda,Este es mi código:

$(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>&nbsp;</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>

2 respuestas 2

1

Simplemente agrega el id al array si es seleccionada, si ya fue seleccionada remueve el id, así:

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
    // borrar también el id del array de filas seleccionadas
    var existe_el_id = id_fila_selected.indexOf(id_fila); 
    id_fila_selected.splice(existe_el_id, 1);
  } else {
    $('#' + id_fila).addClass('seleccionada');
    // agregar id sólo si se hizo click
    id_fila_selected.push(id_fila); 
  }
  //2702id_fila_selected=id_fila;
}

Y cuando llamas a eliminar(), no es necesario pasar el parámetro id_fila_selected pues más abajo lo declaraste como variable global.

  $(document).ready(function() {
  $('#bt_add').click(function() {
    agregar();
  });
  $('#bt_del').click(function() {
    eliminar();//eliminar(id_fila_selected); podemos omitir el parámetro pues abajo lo declaras como variable global
  });

  $('#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>&nbsp;</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');
    // borrar también el id del array de filas seleccionadas
    var existe_el_id = id_fila_selected.indexOf(id_fila); 
    id_fila_selected.splice(existe_el_id, 1);
  } else {
    $('#' + id_fila).addClass('seleccionada');
    // agregar id sólo si se hizo click
    id_fila_selected.push(id_fila); 
  }
  //2702id_fila_selected=id_fila;
}

function eliminar() {
  /*$('#'+id_fila).remove();
  reordenar();*/
  for (var i = 0; i < id_fila_selected.length; i++) {
    $('#' + id_fila_selected[i]).remove();
  }
  reordenar();
}

function reordenar() {
  var num = 1;
  $('#tabla tbody tr').each(function() {
    $(this).find('td').eq(0).text(num);
    num++;
  });
}

function eliminarTodasFilas() {
  $('#tabla tr.selected').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>

0

El problema esta en tu arreglo cada vez que seleccionas un input este se agrega nuevamente a tu arreglo, aquí es necesario validar si esta agregado o no.

Para eso utilizo $.inArray('element',arreglo) y en caso de que se elimine un elemento seleccionado utilizaría .splice(index,1), por lo tanto la función seleccionar agregaría lo siguiente:

var index = $.inArray(id_fila, id_fila_selected);
if(index == -1)
  id_fila_selected.push(id_fila);
else
  id_fila_selected.splice(index, 1);

pero ahora hay otro problema, y es que no se vacea el arreglo después de eliminar el elemento seleccionado:

id_fila_selected = [];

Con esos cambios quedo solucionado tu problema.

$(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>&nbsp;</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;
  
  var index = $.inArray(id_fila, id_fila_selected);
  if(index == -1)
    id_fila_selected.push(id_fila);
  else
    id_fila_selected.splice(index, 1);
}

function eliminar(id_fila) {
  /*$('#'+id_fila).remove();
  reordenar();*/
  for (var i = 0; i < id_fila.length; i++) {
    $('#' + id_fila[i]).remove();
  }
  reordenar();
  id_fila_selected = [];
}

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.