$(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> </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>