1

Tengo una tabla a la cual, le agrego datos desde tres diferentes TextBox. Para esto utilizo jQuery y C# de la siguiente manera:

<form>
    <input type="text" id="inputText1">
    <input type="text" id="inputText2">
    <input type="text" id="inputText3">
    <button type="button" class="btn btn-default" id="submit">Submit</button>
</form>
<script>
    $("#submit").click(function (e) {
        e.preventDefault();
        var val1 = $("#inputText1").val();
        var val2 = $("#inputText2").val();
        var val3 = $("#inputText3").val();
        $('#myTable').append('<tr><th scope="row">2</th><td class="value">' + val1 + '</td><td>' + val2 + '</td><td>' + val3 + '</td><td><a href="#" id="select">Modificar</a>                         <a href="#" id="eliminar">Eliminar</a></td></tr>');
        $("#inputText1").val('');
        $("#inputText2").val('');
        $("#inputText3").val('');
    });
</script>

El código de mi tabla es el siguiente (puro HTML).

<div class="table-responsive">
    <table class="table table-striped table-bordered table-condensed" id="myTable" style="width:90%; margin:0 auto;">
        <thead>
            <tr>
                <th>#</th>
                <th>ID</th>
                <th>Last Name</th>
                <th>Username</th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Es muy sencillo y como ven tiene tres columnas, pero el que me interesa es el ID, este no debe repetirse en ningún registro de la tabla, quiero lograr, utilizando jQuery, que al momento de ingresar un ID repetido se le muestre un mensaje al usuario indicando la imposibilidad de registrar al empleado y que de hecho no se le permita ingresar el registro en la tabla.

Como complemento, estos datos, se almacenan en la tabla, pero no en la base de datos, ese será un paso posterior. De momento, solo quiero validar que el ID no se repita en los registros de la tabla.

2
  • ¿Por qué dicho ID no es autoincrementable? ¿Es un texto?
    – gugadev
    el 12 mar. 2017 a las 2:16
  • debe ser especificado por el usuario
    – user32308
    el 12 mar. 2017 a las 3:16

2 respuestas 2

1

Simplemente crea una función que itere los primeros td de cada fila y compare el texto con el id a ingresar.

Nota: si el campo ID va a usarse como PK en la base de datos, este campo no debe estar en el formulario. Si dos usuarios crean un usuario al mismo tiempo, tendrán la misma PK y habrá un conflicto en la base de datos.

$("#submit").click(function(e) {
  e.preventDefault();
  
  var id = $("#inputText1").val().toLowerCase();
  var lastname = $("#inputText2").val();
  var name = $("#inputText3").val();
  
  if (checkId(id)) {
  	return alert('El ID ya está siendo usado');
  }
  
  $('#myTable tbody').append('<tr><td for="id">' + id + '</td><td>' + lastname + '</td><td>' + name + '</td><td><a href="#" id="select">Modificar</a><a href="#" id="eliminar">  Eliminar</a></td></tr>');
  $("#inputText1").val('');
  $("#inputText2").val('');
  $("#inputText3").val('');
  $('#inputText1').focus();
});

function checkId (id) {
	let ids = document.querySelectorAll('#myTable td[for="id"]');

  return [].filter.call(ids, td => td.textContent === id).length === 1;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
}

.table-responsive {
  margin-top: 25px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="form">
  <div class="form-group">
    <label for="inputText1">ID</label>
    <input type="text" class="form-control" id="inputText1">
  </div>
  
  <div class="form-group">
    <label for="inputText2">Lastname</label>
    <input type="text" class="form-control" id="inputText2">
  </div>
  
  <div class="form-group">
    <label for="inputText3">Name</label>
    <input type="text" class="form-control" id="inputText3">
  </div>
  <button type="button" class="btn btn-default" id="submit">Submit</button>
</form>

<div class="table-responsive">
  <table class="table table-striped table-bordered table-condensed" id="myTable" style="width:100%; margin:0 auto;">
    <thead>
      <tr>
        <th>ID</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

6
  • 1
    muchas gracias Gustavo, soluciona mi duda, como complemento para aquel que tenga la misma duda solo aclarar que el ID no es PK.
    – user32308
    el 12 mar. 2017 a las 3:45
  • Una pregunta mas Gustavo, si quisiera comparar no el primer dato de la tabla sino el segundo o el tercero, que debería modificar en tu respuesta? que debo modificar para poder seleccionar cualquier columna de la tabla y así comparar que no se repita el dato?
    – user32308
    el 12 mar. 2017 a las 3:50
  • Si el id puede estar en cualquiier lado, mejor agrega un atributo data en cada celda del id. Por ejemplo, <td for="id"> y en la función checkId en lugar de seleccionar los primeros td de cada fila, selecciona los td con el atributo for="id": document.querySelectorAll('td[for="id"]');.
    – gugadev
    el 12 mar. 2017 a las 3:53
  • disculpa la ignorancia, quedaria asi: function checkId (id) { let ids = document.querySelectorAll('td[for="id"]'); return [].filter.call(ids, td => td.textContent === id).length === 1; } y con un <td for="id">' + lastname + '</td> ?
    – user32308
    el 12 mar. 2017 a las 4:00
  • He actualizado mi respuesta añadiendo esto último.
    – gugadev
    el 12 mar. 2017 a las 4:04
0

Hola amigos hice exactamente lo de la respuesta de Gustavo, pero no me valida le puse un alert con el valor que me trae:

let ids = document.querySelectorAll('#tbventas td[for="nombre_pro"]');

y esto sale en el alert: [object NodeList]. Alguien me podría decir si aun funciona ese metodo o que estoy haciendo mal mi td lo tengo así:

html += "<td for='nombre_pro'> <input type='hidden' id='idproductos' name='idproductos[]' value='" + info_producto.id + "'>" + info_producto.nombre + " </td>";

Ayuda por favor...

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.