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
