Skip to main content
Agregue librerías que mejora el estilo de la tabla
Origen Enlace
Reinos Ric
  • 797
  • 1
  • 9
  • 27
$(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();

      });


    });
    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();
    }

    
    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]; }
        });
        reordenar()
      }
    }

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

    function eliminar() {
    
      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();
      });
    }
    
    $(function () {        
          $("table").on("dblclick", "td",function () {                  
              var OriginalContent = $(this).text();
              $(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");
                      }
                  });
              $(this).children().first().blur(function(){
                  $(this).parent().text(OriginalContent);
                  $(this).parent().removeClass("cellEditing");
                  });
              });
          });
#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://ajaxcdnjs.googleapiscloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/jqueryjs/tether.min.js"></script>
<div<script id="content">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"/>

  <label> Tabla de Ejemplo </label>
  <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>
        
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>
$(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();

      });


    });
    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();
    }

    
    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]; }
        });
        reordenar()
      }
    }

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

    function eliminar() {
    
      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();
      });
    }
    
    $(function () {        
          $("table").on("dblclick", "td",function () {                  
              var OriginalContent = $(this).text();
              $(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");
                      }
                  });
              $(this).children().first().blur(function(){
                  $(this).parent().text(OriginalContent);
                  $(this).parent().removeClass("cellEditing");
                  });
              });
          });
#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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <label> Tabla de Ejemplo </label>
  <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>
        
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>
$(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();

      });


    });
    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();
    }

    
    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]; }
        });
        reordenar()
      }
    }

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

    function eliminar() {
    
      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();
      });
    }
    
    $(function () {        
          $("table").on("dblclick", "td",function () {                  
              var OriginalContent = $(this).text();
              $(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");
                      }
                  });
              $(this).children().first().blur(function(){
                  $(this).parent().text(OriginalContent);
                  $(this).parent().removeClass("cellEditing");
                  });
              });
          });
#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"/>

  <label> Tabla de Ejemplo </label>
  <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>
        
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>
$(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();

      });


    });
    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();
    }

    
    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]; }
        });
        reordenar()
      }
    }

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

    function eliminar() {
    
      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();
      });
    }
    
    $(function () {        
          $("table").on("dblclick", "td",function () {                  
              var OriginalContent = $(this).text();
              $(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");
                      }
                  });
              $(this).children().first().blur(function(){
                  $(this).parent().text(OriginalContent);
                  $(this).parent().removeClass("cellEditing");
                  });
              });
          });
#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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <label> Tabla de Ejemplo </label>
  <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>
        
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>
$(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();

  });


});
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();
}


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]; }
    });
    reordenar()
  }
}

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

function eliminar() {

  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();
  });
}

$(function () {        
      $("table").on("dblclick", "td",function () {                  
          var OriginalContent = $(this).text();
          $(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");
                  }
              });
          $(this).children().first().blur(function(){
              $(this).parent().text(OriginalContent);
              $(this).parent().removeClass("cellEditing");
              });
          });
      });
#content {
  position: absolute;
  min-height: 50%;
  width: 80%;
  top: 20%;
  left: 5%;
}

.selected {
  cursor: pointer;
}

.selected:hover {
  background-color: #0585C0;
}

.seleccionada {
  background-color: #0585C0;
}
<div id="content">
  <label> Tabla de Ejemplo </label>
  <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>
    
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>
$(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();

      });


    });
    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();
    }

    
    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]; }
        });
        reordenar()
      }
    }

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

    function eliminar() {
    
      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();
      });
    }
    
    $(function () {        
          $("table").on("dblclick", "td",function () {                  
              var OriginalContent = $(this).text();
              $(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");
                      }
                  });
              $(this).children().first().blur(function(){
                  $(this).parent().text(OriginalContent);
                  $(this).parent().removeClass("cellEditing");
                  });
              });
          });
#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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <label> Tabla de Ejemplo </label>
  <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>
        
<thead>
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
    <th>PUESTO</th>
    <th>EMAIL</th>
  </tr>
</thead>
  </table>
</div>

nuevamente pido su ayuda ya que soy nuevo en esto de programar en Javascript y me cuesta entender ciertas cosas,tengo otroTengo un problema con el mismo programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario no ingrese uno o ningún dato dentro de la tabla me de un alertalert que diga: "no ha ingresado nombre de la columna por favor ingreselo"ingréselo" y que también no agregue la fila con el campo vacióvacío, lo único que si hace mi programa es que no agregue una fila de masmás cuando tiene uno ya abierto, espero que entiendan mi problema,les. les muestro mi código y puedan ayudarme:

nuevamente pido su ayuda ya que soy nuevo en esto de programar en Javascript y me cuesta entender ciertas cosas,tengo otro problema con el mismo programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario no ingrese uno o ningún dato dentro de la tabla me de un alert que diga: "no ha ingresado nombre de la columna por favor ingreselo" y que también no agregue la fila con el campo vació, lo único que si hace mi programa es que no agregue una fila de mas cuando tiene uno ya abierto, espero que entiendan mi problema,les muestro mi código y puedan ayudarme:

Tengo un problema con el mismo programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario no ingrese uno o ningún dato dentro de la tabla me de un alert que diga: "no ha ingresado nombre de la columna por favor ingréselo" y que también no agregue la fila con el campo vacío, lo único que si hace mi programa es que no agregue una fila de más cuando tiene uno ya abierto, espero que entiendan mi problema. les muestro mi código:

Cambie en los campos: ID, NOMBRE, AREA, PUESTO Y EMAIL, <td> a <th> ya que la cabecera se editaba con <td>
Origen Enlace
Reinos Ric
  • 797
  • 1
  • 9
  • 27
Loading
Origen Enlace
Reinos Ric
  • 797
  • 1
  • 9
  • 27
Loading