1

quería saber si existe la forma de eliminar un fila de una tabla usando jquery donde los ids están ordenados correlativamente conservando el orden. Esto es, por ejemplo:

<tr id=1>
<tr id=2>
<tr id=3>

Si borro la fila 2 debería quedar de la siguiente forma:

<tr id=1>
<tr id=2>

Eso es todo, cualquier ayuda es bienvenida.


El código siguiente recorre las opciones de un multiselect dejando la opcion seleccionada al último y luego la borra. Al final borrar la fila de la tabla, pero sucede los ids de la tabla pierden su correlatividad.

function eliminar(t)
{
    var len = document.getElementById("detalle").length;//multiselect
    var i=t;

     if (i >= 0){

        for (var j=i;j<len;j++){
            var paso_text = document.getElementById("detalle").options[j].text;
            var paso_value = document.getElementById("detalle").options[j].value;

            document.getElementById("detalle").options[j].text =  document.getElementById("detalle").options[j+1].text;
            document.getElementById("detalle").options[j].value =  document.getElementById("detalle").options[j+1].value;
            document.getElementById("detalle").options[j+1].text =  paso_text;
            document.getElementById("detalle").options[j+1].value =  paso_value;
        }
        document.getElementById("detalle").length = len-1;    
    }else{
        alert("!! Seleccione el producto a quitar !!");
    }

    $('#tabla_resumen tr#'+t).remove();
}

La solución que más se aproxima a lo que quiero es la del usuario rene limon. Necesito saber como se adapta su solución en este contexto.

<!DOCTYPE html>
<html>
<head>
    <title></title>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
tr{
  background: #ccc;
  cursor: pointer;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>
<table>
  <tr id="1">
    <td>1</td><td><a onclick="eliminar(this);">eliminar<a/></td>
  </tr>
  <tr id="2">
    <td>2</td><td><a onclick="eliminar(this);">eliminar<a/></td>
  </tr>
  <tr id="3">
    <td>3</td><td><a onclick="eliminar(this);">eliminar<a/></td>
  </tr>
  <tr id="4">
    <td>4</td><td><a onclick="eliminar(this);">eliminar<a/></td>
  </tr>
</table>
</body>

function eliminar(t) {
  var len = document.getElementById("detalle").length; //multiselect
  var i = t;

  if (i >= 0) {

    for (var j = i; j < len; j++) {
      var paso_text = document.getElementById("detalle").options[j].text;
      var paso_value = document.getElementById("detalle").options[j].value;

      document.getElementById("detalle").options[j].text = document.getElementById("detalle").options[j + 1].text;
      document.getElementById("detalle").options[j].value = document.getElementById("detalle").options[j + 1].value;
      document.getElementById("detalle").options[j + 1].text = paso_text;
      document.getElementById("detalle").options[j + 1].value = paso_value;
    }
    document.getElementById("detalle").length = len - 1;
  } else {
    alert("!! Seleccione el producto a quitar !!");
  }

  $('#tabla_resumen tr#' + t).remove();
}
tr {
  background: #ccc;
  cursor: pointer;
}

td {
  min-width: 125px;
  padding: 10px;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
tr{
  background: #ccc;
  cursor: pointer;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>
<table id='tabla_resumen'>
  <tr id="0">
    <td>1</td><td><a onclick="eliminar(0);">eliminar<a/></td>
  </tr>
  <tr id="1">
    <td>2</td><td><a onclick="eliminar(1);">eliminar<a/></td>
  </tr>
  <tr id="2">
    <td>3</td><td><a onclick="eliminar(2);">eliminar<a/></td>
  </tr>
  <tr id="3">
    <td>4</td><td><a onclick="eliminar(3);">eliminar<a/></td>
  </tr>
</table> 
<script type="text/javascript">
function eliminar(e){
	alert(e);
  var parent = $("tabla_resumen tr#"+e).parent();
  $("#tabla_resumen tr#"+e).remove();
  parent.children("#tabla_resumen tr").each(function(i){
       ("#tabla_resumen tr").attr('id', (i+1));
       ("#tabla_resumen tr").children().text((i+1));
  });
}
</script>
</body>

12
  • se tendria que hacer un recorrido para cambiar los ids el 18 ene. 2018 a las 15:02
  • No es muy bueno q cambies los ID. Es preferible borrar la fila y dejar los ids q quedaron, por mas q te queden discontinuados. el 18 ene. 2018 a las 15:11
  • En este caso tengo que cambiarlos. el 18 ene. 2018 a las 15:13
  • Por qué tienes que cambiarlos? Hay otras soluciones como usar data-attributes
    – ffflabs
    el 18 ene. 2018 a las 15:29
  • ok veré que puedo hacer con eso. el 18 ene. 2018 a las 15:36

3 respuestas 3

2

Cambiar los IDs es engorroso y no muy recomendable. Si lo que quieres es que se añada/borre la fila de la tabla que corresponde a la opción del multiselect, podrías optar por varias opciones sin necesidad de tener que reacomodar los IDs. Aquí te dejo dos:

  1. Hacer que los option tengan un data-atributo que apunte al ID de la fila que debe crearse/borrarse y actuar en consecuencia cuando se seleccionen/deseleccionen.
  2. Cuando se pulse en un option comprobar cuál es el índice y crear/borrar (según se haya marcado o desmacardo) una fila en la tabla en la misma posición del índice.

En ninguno de esos dos casos tendrás que actualizar los IDs de opciones o filas y te ahorrarás problemas innecesarios que puedan surgir al cambiar IDs.

Aquí puedes ver un ejemplo funcionando (de la primera opción):

// cuando se cambia el valor del multiselect
$("#miselect").on("change", function() {
  // para cada opción
  $(this).find("option").each(function() {
    var target = $(this).data("target");
    // si está marcada
    if ($(this).is(":checked")) {
      // si no existe una fila con ID igual al data-target, se crea
      if ($("#" + target).length == 0) {
        // aquí pondrías el código para crear la fila
        $("#mitabla").append("<tr id='"+target+"'><td>"+target+"</td></tr>");
      }
    }
    // si no está marcada y existe una fila con ID igual al data-target
    else if ($("#" + target).length > 0) {
      // se borra
      $("#" + target).remove();
    }
  });
});
select {
  width: 100px;
  height: 60px;
}

option {
  height: 20px;
}

table, tr, td, th {
  border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="miselect" multiple>
  <option value="1" data-target="tr-1">Opción 1</option>
  <option value="2" data-target="tr-2">Opción 2</option>
  <option value="3" data-target="tr-3">Opción 3</option>
  <option value="4" data-target="tr-4">Opción 4</option>
  <option value="5" data-target="tr-5">Opción 5</option>
</select>

<table id="mitabla">
  <tr>
    <th>
      Valor
    </th>
  </tr>
</table>

0

Que te parece esto?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Document</title>
</head>

<body>
    <table>
        <tr>
            <td>
                <button id="1">Borrar</button>
            </td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                <button id="2">Borrar</button>
            </td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <button id="3">Borrar</button>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                <button id="4">Borrar</button>
            </td>
            <td>4</td>
        </tr>
    </table>
</body>
<script>
    $(document).ready(function () {
        $("#1").on("click", function () {
            $(this).parent().parent().toggle();
            OrdenarFilas(1);
        });
        $("#2").on("click", function () {
            $(this).parent().parent().toggle();
            OrdenarFilas(2);
        });
        $("#3").on("click", function () {
            $(this).parent().parent().toggle();
            OrdenarFilas(3);
        });
        $("#4").on("click", function () {
            $(this).parent().parent().toggle();
            OrdenarFilas(4);
        });
    });
    function OrdenarFilas(fila) {
        var $fila = $("tr").get(fila);
        var $filaSiguiente = $($($fila).next().find("td").get(1)).text();
        console.log(parseInt($filaSiguiente) - 1);
        console.log($filaSiguiente);
        var cantidadTR = $("tr").length;
        for (var i = fila; i < cantidadTR; i++) {
            $($($("tr").get(i)).find("td").get(1)).text(parseInt($($($("tr").get(i)).find("td").get(1)).text()) - 1);
        }
    }
</script>

</html>

3
  • 1
    No recomiendo cambiar los IDs el 18 ene. 2018 a las 15:10
  • quiero borrar un tr y que la tabla se ordene de manera que no se pierda la correlatividad de las filas. el 18 ene. 2018 a las 15:11
  • Es verdad no había entendido tu pregunta, es un poco raro buscar hacer eso, te edito el código para que lo veas. el 18 ene. 2018 a las 16:25
0

Aquí incluyo un fragmento de código con el que puedes lograrlo:

$("tr a").on("click", function(event) {
  event.preventDefault();
  var parent = $(this).closest("table");
  $(this).closest("tr").remove();
  // agrego que descienda hasta los tr y ahi hago la iteración
  parent.children("tbody").children("tr").each(function(i){
       $(this).attr('id', (i+1));
       $(this).children("td:nth-child(1)").text((i+1));
  });
});
tr{
  background: #ccc;
  cursor: pointer;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="1">
    <td>1</td>
    <td>
       <a>eliminar</a>
    </td>
  </tr>
  <tr id="2">
    <td>2</td>
    <td>
       <a>eliminar</a>
    </td>
  </tr>
  <tr id="3">
    <td>3</td>
    <td>
       <a>eliminar</a>
    </td>
  </tr>
  <tr id="4">
    <td>4</td>
    <td>
       <a>eliminar</a>
    </td>
  </tr>
</table>

La variable parent la utilizo para guardar la referencia del elemento ya que al eliminarlos desaparece. Cambio también el texto por motivos visuales pero si quieres ver los ids cambiando utiliza el inspector del navegador.

Actualización

Con la función onclick de js:

function eliminar(t)
{
  var parent = $(t).closest("table");
  console.log( $(t).closest("table").prop("tagName") );
  $(t).closest("tr").remove();
  // agrego que descienda hasta los tr y ahi hago la iteración
  parent.children("tbody").children("tr").each(function(i){
       console.log("hogf");
       $(this).attr('id', (i+1));
       $(this).children("td:nth-child(1)").text((i+1));
  });

}
tr{
  background: #ccc;
  cursor: pointer;
}
td{
  min-width: 125px;
  padding: 10px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="1">
    <td>1</td>
    <td>
       <a onclick="eliminar(this);">eliminar</a>
    </td>
  </tr>
  <tr id="2">
    <td>2</td>
    <td>
       <a onclick="eliminar(this);">eliminar</a>
    </td>
  </tr>
  <tr id="3">
    <td>3</td>
    <td>
       <a onclick="eliminar(this);">eliminar</a>
    </td>
  </tr>
  <tr id="4">
    <td>4</td>
    <td>
       <a onclick="eliminar(this);">eliminar</a>
    </td>
  </tr>
</table>

8
  • como puedo adaptarlo para poder llamarlo desde la función eliminar que postie más abajo? el 18 ene. 2018 a las 17:03
  • ya no se parece mucho a tu pregunta original, edita añadiendo mas detalles de los multiselect y donde se eliminaria cada fila. Considera crear un snippet para ver lo que tienes hasta el momento
    – Rene Limon
    el 18 ene. 2018 a las 17:08
  • en el tr tengo un 'input a' que al hacer click llama una funcion que se llama eliminar dentro elimino la columna mediante la instrucción $('#tabla_resumen tr#'+t).remove();, mi pregunta es cómo quedaría el jquery al adaptarlo en dicha función. el 18 ene. 2018 a las 19:45
  • edite mi pregunta y agregué el código contextualizado a lo que necesito. Cómo se adapta tu solución a html que puse en la pregunta? el 18 ene. 2018 a las 20:20
  • aún no tiene la información mínima requerida. no especificas que es detalle o #tabla_resumen tr# los pones en js pero en html no están. Además tu hablabas de un multiselect pero no lo es, solo es un elemento link en cada fila para eliminar. Un multiselect en html es otra cosa, como lo que Alvaro te puso en su respuesta, no puedo responder hasta que aclares todas esas dudas. También, añades jquery en tu pregunta y en el código pero nunca lo utilizas, es js puro, salvo en la ultima linea
    – Rene Limon
    el 18 ene. 2018 a las 20:33

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.