#The main idea I've been working on. That when selecting a patent x from the select in the first row. When adding a second row, the patent of the first row appears blocked. Ideally, the same patent should not be repeated within the table.
#This first line of code helps me add a new row to the table
<script>
$(document).ready(function(){
$("#AgregarFila").click(function(){
var TablaKilometraje = document.getElementById("tablaprueba");
$("#tablaprueba").append("<tr>"+TablaKilometraje.rows[0].innerHTML+"</tr>");//1
$('.borrar').off().click(function(e) {
$(this).parent('td').parent('tr').remove();//2
});
});
});
</script>
#This line helps to load the data in the select. If I add a row in the select it will show me all the data. If I add another row it will continue to show me the data in the select
<script>
$(document).ready(function () {
const select = document.getElementById('id_tracto');
function CargarPatente() {
$.ajax({
url: 'Cargar_Datos_Kilometraje/Datos_Tracto_Kilometraje.php',
type: 'GET',
success: function(response) {
const patente=(response)
const options= document.createElement("option");
patente.forEach(departamento => {
const option = new Option(departamento.patentedata , departamento.iddata)
select.append(option)
})
}
})
}
CargarPatente()
})
</script>
#This is the html where it shows me the table
<div class="encabezado_0">
<p>REGISTRO DE KILOMETRAJE</p>
</div>
<div class="registro">
<form class="row g-3 needs-validation" method="POST" action="Registro_Kilometraje/Registrar_BBDD_Kilometraje.php" enctype="multipart/form-data">
<div class="form-group">
<label>
<div class="btn btn-outline-primary" id="AgregarFila"> AGREGAR NUEVA COLUMNA</div>
</label>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">PATENTES</th>
<th scope="col">FECHA KM</th>
<th scope="col">KM ANTERIOR</th>
<th scope="col">INGRESAR KM ACTUAL</th>
<th scope="col">INGRESO FECHA KM</th>
<th scope="col">DIF. KM</th>
<th scope="col">ELIMINAR</th>
</tr>
</thead>
<tbody id="tablaprueba">
<tr >
<td class="col-sm-3">
<select class="form-select id_tracto" id="id_tracto" name="id_tracto[]">
<option value="">SELECCIONAR PATENTE</option>
</select>
</td>
<td class="col-sm-2">
<input type="text" class="form-control fecha_kilometraje" id="fecha_kilometraje" name="fecha_kilometraje[]" value="" readonly/>
</td>
<!-- Corresponde al ultimo kilometraje registrado en la bbdd que puede ser por mant,reparacion o registro km -->
<td class="col-sm-2">
<input type="text" class="form-control kilometraje_actual" id="kilometraje_actual" name="kilometraje_actual[]" value="" readonly/>
</td>
<!-- Corresponde al kilometraje que se va a ingresar por sistema-->
<td class="col-sm-2">
<input type="" class="form-control kmactual" id="kmactual" name="kmactual[]"required>
</td>
<td class="col-sm-2">
<input type="date" class="form-control fecha_ingreso_km" id="fecha_ingreso_km" name="fecha_ingreso_km[]" required>
</td>
<td class="col-sm-2">
<input type="" class="form-control difierencia_km" id="difierencia_km" name="difierencia_km[]" readonly>
</td>
<td class="col-sm-2">
<button type="button" class="btn btn-outline-danger borrar">ELIMINAR</button>
</td>
</tr>
</tbody>
</table>
#This code helps me to load some data in the input that I need to read
<script>
$("#tablaprueba").on('change', 'select.id_tracto', function() {
var $select = $(this), // Obtenemos el select modificado
$tr = $select.closest('tr'), // Buscamos el tr del select
valor = $select.val();
$.ajax({
data : { valor : valor },
url : 'Cargar_Datos_Kilometraje/Cargar_Valor_Kilometraje.php',
dataType : 'json',
type: 'POST',
success : function(json) {
$tr.find("input.fecha_kilometraje").val(json.fecha_km_actual);
$tr.find("input.kilometraje_actual").val(json.km_actual);
},
error : function(xhr, status) {
alert('Disculpe, existió un problema');
}
});
});
</script>
#This part helps us to do a calculation and then send it to the corresponding input
<script>
$("#tablaprueba").on('change', 'input.kmactual', function() {
var contenido = document.getElementsByClassName("kilometraje_actual")[0].value;
var $select = $(this), // Obtenemos el select modificado
$tr = $select.closest('tr'), // Buscamos el tr del select
valor = $select.val();
if (parseInt(valor)>parseInt(contenido)) {
var total= valor-contenido;
$tr.find("input.difierencia_km").val(total);
} else {
MENSAJE = "EL KILOMETRAJE ACTUAL TIENE QUE SER MAYOR QUE EL KILOMETRAJE ANTERIOR ..!!";
$("#mensaje").html(MENSAJE);
$("#modalMensaje").modal('show');
}
});
</script>
This is my proposal, let's see what you think. Make these changes:
CargarPatente
, where you put this:change it to this:
thus , using setAttribute() we are going to add a class to each option corresponding to the dynamically generated number in the i variable during the iteration of the forEach loops , which will have names like
patente1
,patente2
, and so on. In this way we can later refer to all of them more easily.#tablaprueba
event where you put this:put this:
In this way, through the data() method of jquery we are storing the current value in the key
prev
, which, if it exists, we retrieve beforehand in the variableprevio
for later use. This is important because it may be the case that after selecting a patent then we want to select another one again in the sameselect
.Then what we do is, thanks to the classes we added earlier, we disable the selected option by adding the attribute
disabled
using attr() , and we enable the changed option that is no longer used so that it can be used in anotherselect
by removing the attributedisabled
using removeAttr() .Let us know if it worked for you.
Here's a functional snippet (somewhat tricky because I can't make the ajax request) so you can see and run it: