0
291
Vistas¿Cómo cambiar todas las filas por un valor de columna en js?
tengo esta mesa
y me gustaría cambiar todo el valor de la columna EDW para todas las filas por el valor seleccionado en la parte superior, ¿puedo hacer eso con javascript?
esta es mi tabla html:
<table id="example1" class="table table-bordered"> <thead> <th>Employee ID</th> <th>Full Name</th> <th>Salary</th> <th>EDW <select type="number" class="edw" name="edw1"> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select></th> <th>TDW</th> <th>Deduction</th> <th>Net Pay</th> </thead> <tbody> @foreach( $employees as $employee) <tr> <td>{{$employee->id}}</td> <td>{{$employee->firstname}} {{$employee->lastname}}</td> <td><input type="number" class="salary" value="{{$employee->salary}}" name="salary"></td> <td><input type="number" class="edw" value="30" name="edw"></td> <td><input type="number" class="tdw" value="30" name="tdw"></td> <td><input type="number" class="deduction" value="0" name="deduction"></td> <td><span class="result"></span> AED</td> </tr> @endforeach2 Respuestas
Responde la pregunta0
Lo que puede hacer es agregar un detector de eventos de cambio en el selector desplegable. Esto le permitirá realizar una acción cada vez que cambie el valor.
En esta devolución de llamada de acción, puede recuperar todos los campos con el nombre edw1 usando document.querySelector . Luego, puede recuperar el valor del campo edw1 usando el argumento e que se pasa a la devolución de llamada. Esta variable contendrá información sobre el evento, incluido el elemento en el que se hizo clic dentro e.target . Todo lo que hay que hacer ahora es recorrer todas las selecciones del nombre edw usando querySelectorAll y pasar el valor: el.value = e.target.value
document.querySelector('select[name=edw1]').addEventListener('change', e => { document.querySelectorAll('input[name=edw]').forEach(el => { el.value = e.target.value }) })0
Solución basada en jQuery
<!DOCTYPE html> <html> <head> <title>Salary Table</title> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1"></meta> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <table id="example1" class="table table-bordered"> <thead> <th>Employee ID</th> <th>Full Name</th> <th>Salary</th> <th>EDW <select id="edw_selection" type="number" class="edw" name="edw1"> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select></th> <th>TDW</th> <th>Deduction</th> <th>Net Pay</th> </thead> <tbody> <tr> <td>1</td> <td>John Smith</td> <td><input type="number" class="salary" value=1000000 name="salary"></td> <td><input type="number" class="edw" value="30" name="edw"></td> <td><input type="number" class="tdw" value="30" name="tdw"></td> <td><input type="number" class="deduction" value="0" name="deduction"></td> <td><span class="result"></span> AED</td> </tr> <tr> <td>2</td> <td>Ivan Petrov</td> <td><input type="number" class="salary" value=3000 name="salary"></td> <td><input type="number" class="edw" value="30" name="edw"></td> <td><input type="number" class="tdw" value="30" name="tdw"></td> <td><input type="number" class="deduction" value="0" name="deduction"></td> <td><span class="result"></span> AED</td> </tbody> <script> $('#example1').on('change','select', () => { var selected_value = document.getElementById("edw_selection").value; $('input[name="edw"]').each( (key,value) => { value.value = selected_value; }); }); </script> </body> </html>