entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

problemas para editar tablas con restricciones

Hola, Tengo esta tabla:

<!Doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
    <title></title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">

<style>#content{position:absolute;min-height:50%;width:80%;top:20%;left:5%;}.selected{cursor:pointer;}.selected:hover{background-color:#EBF5FB;}.seleccionada{background-color:#81D4FA;}table thead{background-color:#7FB3D5;}</style>
<script>
$(document).ready(function() {

    $('#bt_add').click(function() {

        var check = [];             
          $("#tabla").find('.selected').find('td').each(function(){
            if($.trim($(this).text()) === "")
              check.push($(this).attr('id'));
         ;
          });

                  if(check.length === 0)

                      agregar();
          else
            alert('No puedo agregar mas de una fila, por favor llene los campos');;

      });

      $('#bt_del').click(function() {

          eliminar();

        });

      $('#bt_delall').click(function() {
        eliminarTodasFilas();
        alert('Elimino todas las filas');
      });
      reordenar();

    });
    var cont = 0;
    var id_fila_selected = [];

    function agregar() {

      var cont_fila = ($('#tabla tbody').find('tr').length) + 1;
      var fila =

        '<tr class="selected" id="fila' + cont_fila + '" 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);

            alert('Se agrego la fila: '+cont_fila);

      reordenar();

    }

    function addToTable(e) {

        if (e.keyCode === 13) {
          e.preventDefault();
         if($("#nombre").val() == ""){
                alert("Ingrese el nombre del usuario");
              return false;
            }else if($("#area").val() == ""){
                   alert("Ingrese el nombre de la area");
                  return false;
            }else if($("#puesto").val() == ""){
                   alert("Ingrese el nombre del puesto");
                  return false;
            }else if($("#email").val() == ""){
                   alert("Ingrese su correo electronico");
                  return false;

            }
        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]; }

        });

        reordenar();

      }
    }

    function seleccionar(id_fila) {
      if ($('#' + id_fila).hasClass('seleccionada')) {
        $('#' + id_fila).removeClass('seleccionada');

        var existe_el_id = id_fila_selected.indexOf(id_fila);
        id_fila_selected.splice(existe_el_id, 1);
      } else {
        $('#' + id_fila).addClass('seleccionada');

        id_fila_selected.push(id_fila);
      }

    }

     function eliminar() {
         var dels = 0;
         var idfilas ="";
         for (var i = 0; i < id_fila_selected.length; i++) {
             idfilas += document.getElementById(id_fila_selected[i]).firstElementChild.textContent + " ... ";
             $('#' + id_fila_selected[i]).remove();
             dels++;

         }
        if (dels==1)
            alert('Se ha eliminado la fila' + idfilas);
        else
            alert('Se han eliminado las filas' + idfilas);
         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 tr.selected').each(function() {
        $(this).remove();
      });
    }

    $(function () {

         $("table").on("dblclick", "td",function () {               
              var OriginalContent = $(this).text();
              var mod = 0;
              var cont_mof = ($('#tabla tbody').find('tr').length);

              $(this).addClass("cellEditing");
              $(this).html("<input type='text' value='" + OriginalContent +"' >");
              $(this).children().first().focus();
              $(this).children().first().keypress(function (e) {

                           if (e.which == 13) {

                      var newContent = $(this).val();
                      $(this).parent().text(newContent);
                      $(this).parent().removeClass("cellEditing");

                     alert(" Acaba de ser modificado: " + OriginalContent + " de la fila: " + cont_mof);         
                  }

                  });
              $(this).children().first().blur(function(){
                  $(this).parent().text(OriginalContent);
                  $(this).parent().removeClass("cellEditing");

                  });

              });
         id_fila_selected=[];
          });

    </script>

</head>
<body>

<div id="content">
  <h1> Tabla de Ejemplo </h1>

  <br>

  <div align="center" style="width:416px;">
            <button id="bt_add" class="btn btn-primary">Agregar</button>
            <button id="bt_del" class="btn btn-primary">Eliminar</button>
            <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
             </div>
            <table id="tabla" style="position:absolute;top:150px;left:75px" class="table table-bordered">

    <thead>
      <tr>
        <th>Nº</th>
        <th>NOMBRE</th>
        <th>AREA</th>
        <th>PUESTO</th>
        <th>EMAIL</th>
      </tr>
    </thead>
  </table>
</div>

</body>
</html>

Que agrega,modifica y elimina filas, solo quiero que en la parte de modificar no me pueda editar dos o mas filas diferentes.

Por favor ayudenme

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta