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 you have read our privacy policy.