0

Muy buenas,

Llevo ya un buen rato intentando implementar esto pero no lo consigo.

Lo he intentado así:

    <script>

	htmlTags = '<tr><td><input type="text" name="scan[]" id="sc"/></td><td></td><td></td><td></td><td></td><td></td></tr>';
		
		

    $(document).ready(function(){
		$('input:first').focus();
		
		$('input').focusout(function(){
			$('#table_t').append(htmlTags);
        });
        
		
    });
</script>
</html>

*PD: de inicio la tabla tiene dos "tr" (con un "input" cada una).

Intento hacer que cada vez que se rellene el "input" y se salte de campo (pulsando TAB), se añada una fila nueva, pero solo funciona 2 veces, después no sigue añadiendo más.

Soy novato en jquery y ajax...

Un Saludo.

2 respuestas 2

0

El evento focusout debería estar ejecutándose siempre apuntando al último input, y para lograr esa referencia necesitamos un contexto mayor en jerarquía para tal input en este caso es tu table con el id table_t.

Entonces quedaría de esta manera:

const htmlTags = '<tr><td><input type="text" name="scan[]"></td><td></td><td></td><td></td><td></td><td></td></tr>';
		
const $tableT = $('#table_t')

$(document).ready(function(){
  $('input:first').focus();

  $tableT.on('focusout', 'input:last', function() {
    $tableT.append(htmlTags);
  });        

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_t">
  <tr><td><input type="text" name="scan[]"></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

0
0

Muchas gracias Christian, pero necesito que antes de poner el foco en la ultima fila se añada otra nueva.

Tu respuesta me ha servido de mucho, solo he cambiado esto:

$tableT.on('focusin', 'input:last', function() {
  $tableT.append(htmlTags);
}); 

De nuevo, muchas gracias por tu ayuda.

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.