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
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>
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
})
})
Related
I have added inputs for only 10 columns in my datatable and trying to save with button click. Below is my code
$('#tblFormBtn').click( function() {
let datas = tblListUpload.$("input").serializeArray();
});
it's getting all the inputs in separate array values. Is it possible to get that array by row?
Update:
working sample
http://live.datatables.net/bucawete/1/
You can map each row to create a serializeArray, here's an example:
const table = $('#example').DataTable();
const data = table.rows().nodes().map((e) => $(e).find('input, select').serializeArray());
console.log(data.toArray());
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
<td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
<td>
<select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected">Edinburgh</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="San Francisco">San Francisco</option>
<option value="Tokyo">Tokyo</option>
</select>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><input type="text" id="row-2-age" name="row-2-age" value="63"></td>
<td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td>
<td>
<select size="1" id="row-2-office" name="row-2-office">
<option value="Edinburgh">Edinburgh</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="San Francisco">San Francisco</option>
<option value="Tokyo" selected="selected">Tokyo</option>
</select>
</td>
</tr>
<tbody>
</table>
I am trying to convert form data into json
I have a html table as following. On form submit what i want to do is convert it to json
<form class="sales-order-form">
<table class="table">
<tbody>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Free Quantity</th>
<th>Sub Total</th>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
</tbody>
</table>
</form>
On form submit how do I convert this form into following json?
[
{
"itemName": "item1",
"unitPrice": "49"
},
{
"itemName": "item2",
"unitPrice": "56"
}
]
How to do this??
I tried following
function getFormData($salesOrderForm){
var unindexed_array = $salesOrderForm.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
But it only returns one json
{
"itemName": "item1",
"unitPrice": "50"
}
You can get elements details by using document.getElementsByName("unitPrice") and document.getElementsByName("itemName")
Try this:
function getFormData() {
let res = [];
let x = document.getElementsByName("unitPrice");
let y = document.getElementsByName("itemName");
for (let i = 0; i < x.length; i++) {
let obj = {
"itemName": x[i].value,
"unitPrice": y[i].value
}
res.push(obj);
}
console.log(res);
}
<form class="sales-order-form">
<table class="table">
<tbody>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Free Quantity</th>
<th>Sub Total</th>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
</tbody>
</table>
</form>
<button onclick="getFormData()">getFormData</button>
You can try with jQuery's .map() and .get()
$('form').submit(function(){
var json = $('.table tr:gt(0)').map(function(){
return {
itemName: $(this).find('select option:selected').text(),
unitPrice: $(this).find('[name=unitPrice]').val()
}
}).get();
console.log(json);
return false; // added to stay on the page for testing purpose
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="sales-order-form">
<table class="table">
<tbody>
<tr>
<th>Item Name</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Free Quantity</th>
<th>Sub Total</th>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
<tr>
<td><select class="form-control" name="itemName" style="width: 250px;">
<option></option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select></td>
<td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">
</td>
</tr>
</tbody>
</table>
<input type="submit" id="Submit" value="Submit"/>
</form>
I would rely on Array.reduce:
function getFormData($salesOrderForm) {
const serializedArray = $salesOrderForm.serializeArray();
var result = serializedArray.reduce((accumulator, value, index) => {
const isNewObj = index % 2 === 0;
const obj = isNewObj ? {} : accumulator[accumulator.length - 1];
if (isNewObj) {
accumulator.push(obj);
}
obj[value.name] = value.value;
return accumulator;
}, []);
console.log(result);
return result;
}
I am using bootstrap table.
My table contains cells that contains input fields.
I try to add event handlers (using jquery) to those input fields but it does not seem to work.
If I add the event handlers to a non bootstrap table it works.
The code below demonstrates the issue. When the user change input fields in the upper table (a bootstrap table), nothing is written to the console.When user change input fields in the lower table (non bootstrap table), a message is written to the console.
How do I add event handlers to the input fields in a bootstrap-table?
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td>
<select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td>
<select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.js"></script>
u need to add your script at the bottom and not in top of the table html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<title>sorted table</title>
</head>
<body>
<span>A Bootstrap table</span>
<table id="my_table_1" data-toggle="table" data-sort-stable="true">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<!------------------------------------------------------------------->
<hr>
<span>A Non Bootstrap table</span>
<table id="my_table_2">
<thead>
<tr>
<th data-sortable="true">A</th>
<th data-sortable="true">B</th>
<th data-sortable="true">C</th>
<th data-sortable="false">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><select>
<option val="112">A</option>
<option val="2">B</option>
<option val="356" selected>C</option>
</select>
</td>
<td><input type="date" value="2018-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>123</td>
<td><select>
<option val="1" selected>A</option>
<option val="2">B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-22"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>56</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-08-23"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>14</td>
<td><select>
<option val="1">A</option>
<option val="2" selected>B</option>
<option val="3">C</option>
</select>
</td>
<td><input type="date" value="2014-07-23"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.4/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
console.log('ready');
$('#my_table_1').find('input[type="date"]').change(function() {
console.log('Table 1.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_1').find('select').change(function() {
console.log('Table 1.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
$('#my_table_2').find('input[type="date"]').change(function() {
console.log('Table 2.Date was changed. Need to check if table is sorted by column C.If so - call the table sort.');
});
$('#my_table_2').find('select').change(function() {
console.log('Table 2.Selection was changed. Need to check if table is sorted by column B.If so - call the table sort.');
});
});
</script>
</body>
</html>
i can clone the first and the last row but i cant clone the 2, 3, 4 and so on rows, so how can i target this rows to clone and erase them respectively.
now i have to write trash so i can post cause my whatever have too mucho code, really men come on this is not esayflow is it XD
demo
$('button[name=add]').on('click', function() {
var cloned = $('#table1 tr:last').clone(true);
$('#table1').append(cloned);
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
If clone does not work properly use "outerHTML" and append it to nearest "tbody".
as follows:
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr')[0].outerHTML;
$(this).closest('tbody').append(cloned);
});
For removing row:
$('button[name=minus]').on('click', function() {
$(this).closest('tr').remove();
});
You need to clone the tr that has the button you clicked.
In your code, you are specifying only the last row to be cloned.
So, to clone any other row, target the row containing the button that has been clicked using jQuery .closest()
$('button[name=add]').on('click', function() {
// this will select the first tr parent that contain the button
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
Use remove() function to remove your target.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1').append(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest('tr').remove();
});
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr id="2">
<td>2</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
<tr>
<td>3</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
Use closest() to clone and remove closest tr.
$('button[name=add]').on('click', function() {
var cloned = $(this).closest('tr').clone(true);
$('#table1 tbody tr:last').after(cloned);
})
$('button[name=erase]').on('click', function() {
$(this).closest("tr").remove();
})
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered" id="table1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
<tbody>
<tr id="2">
<td class="count">1</td>
<td>
<select name="numero" id="" class="form-control">
<option value="">a</option>
<option value="">b</option>
<option value="">c</option>
<option value="">d</option>
<option value="">e</option>
<option value="">...</option>
</select>
<button name="add">+</button>
<button name="erase">-</button>
</td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
<td><input type="number" min="0" class="form-control"></td>
</tr>
</tbody>
</table>
I have to disable a input in a td, based in the selection in the td select, the td target is the next one, but when I select a option it changes all the next td in the column. I´m new in this u_u
<table id="tabla">
<!-- Cabecera de la tabla -->
thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" onchange="funcSelect()" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2" onchange="funcSelect()"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
this is the function I call for disable the next input, basically i am obtaining the id and the value and depending on that I disable the input, but apparently I disable or enable all the td's not just the one in the row I work
function funcSelect(){
var idSel = $("select").attr("id");
console.log(idSel);
var valSel = $("#"+idSel).val();
var id = "#"+idSel;
console.log(id);
console.log(valSel);
if(valSel === "4"){
$("td.especial").next("td").children().removeAttr("disabled");
}else{
$("td.especial").next("td").children().attr("disabled", "disabled");
}
}
Javascript doesn't work this way.Here is a working version of you code..... Plus you don't have to use any inline function to get this work.....
HTML:
<table id="tabla">
<!-- Cabecera de la tabla -->
<thead>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Sexo</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="especial">
<select id="mySelect" name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value="3" ></td>
<td></td>
</tr>
<tr>
<td class="especial">
<select id="mySelect2"
name="inmueble_psesion" class="browser-default">
<option value="1">PROPIO</option>
<option value="2">RENTADO</option>
<option value="3">COMODATO</option>
<option value="4">*OTRO</option>
</select>
</td>
<td><input type="text" name="" disabled></td>
<td><input type="text" name="" value=""></td>
<td><input type="text" name="" value=""></td>
</tr>
</tbody>
</table>
Javascript/Jquery:
$(document).on('change', 'select', function(event) {
var val = $(this).val();
if (val == 4) {
$(this).parent().next('td').children().removeAttr('disabled');
}else{
$(this).parent().next('td').children().attr('disabled', 'disabled');
}
});
You should use $("#"+idSel).closest("td.especial") instead of $("td.especial") to find just the first ancestor matching td.especial selector.
Your current code is just matching everything existing in DOM matching given selector `td.especial.