0
285
Viewshow to change all rows for a column value in js?
i have this table
and i would like to change all the EDW column value for all rows by the value selected on the top , hoe can i do that with javascript ?
this is my table 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>
@endforeach
2 answers
Answer question0
What you can do is add a change event listener on the dropdown selector. This will allow you to perform an action every time the value changes.
On this action callback, you can retrieve all the fields having the name edw1 using document.querySelector. Then, you can retrieve the value of the edw1 field using the e argument that is passed to the callback. This variable will contain information about the event, including the clicked element inside e.target. All there is to do now is looping through all selects of name edw using querySelectorAll and pass the value : 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
Solution based on 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>