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>
Related
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
})
})
I have a Bootstrap 4 table which shows existing data as well as a row at the bottom to enter another line and submit that. I've setup fixed column widths in the header row but these are not being respected when the table is rendered.
Here's an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th style="width:20%">No</th>
<th style="width:30%">Name</th>
<th style="width:5%">Phase</th>
<th style="width:15%">Name</th>
<th style="width:5%">Day</th>
<th style="width:5%">Time</th>
<th style="width:5%">Totals</th>
<th style="width:10%">Notes</th>
<th style="width:5%">Action</th>
</tr>
</thead>
<tbody>
<tr id="1956253">
<td>2368941257</td>
<td>London Gateway</td>
<td>23/B</td>
<td>Planning</td>
<td>Mon</td>
<td>7</td>
<td>7</td>
<td>lorem ipsum</td>
<td>N/A</td>
</tr>
<tr>
<td>
<select name="projectNumber" required>
<option value=""></option>
<option value="365541254">365541254</option>
<option value="874521147">874521147</option>
<option value="3456467456">3456467456</option>
</select>
</td>
<td id="ProjectName"></td>
<td id="ProjectPhases"></td>
<td></td>
<td>
<select name="Date" required>
<option value=""></option>
<option value="Mon">Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</select>
</td>
<td><input type="text" name="Time" required></td>
<td></td>
<td><input type="text" name="Notes"></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<button type="reset" class="btn">Reset</button>
<button type="submit" class="btn btn-success">Save</button>
</td>
</tr>
</tbody>
</table>
For example the Time column should only be 5% of the width but is taking up much more space. Nothing I've tried has been able to get the specified widths to be respected here.
Well, you gave width to the ths but not the trs - Also, the input field inside the cell is much wider so the entire column gets wider to accommodate.
You could use specific classes for each width to avoid repeating styles.
See demo below
.w-5{
width: 5%;
}
.w-10
width: 10%;
}
.w-15{
width: 15%;
}
.w-20{
width: 20%;
}
.w-30{
width: 30%;
}
.w-5 input{
width:100%;
}
.w-20 select{
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th class="w-20">No</th>
<th class="w-10">Name</th>
<th class="w-5">Phase</th>
<th class="w-15">Name</th>
<th class="w-5">Day</th>
<th class="w-5">Time</th>
<th class="w-5">Totals</th>
<th class="w-10">Notes</th>
<th class="w-5">Action</th>
</tr>
</thead>
<tbody>
<tr id="1956253">
<td>2368941257</td>
<td>London Gateway</td>
<td>23/B</td>
<td>Planning</td>
<td>Mon</td>
<td>7</td>
<td>7</td>
<td>lorem ipsum</td>
<td>N/A</td>
</tr>
<tr>
<td class="w-20">
<select name="projectNumber" required>
<option value=""></option>
<option value="365541254">365541254</option>
<option value="874521147">874521147</option>
<option value="3456467456">3456467456</option>
</select>
</td>
<td id="ProjectName"></td>
<td id="ProjectPhases"></td>
<td></td>
<td>
<select name="Date" required>
<option value=""></option>
<option value="Mon">Mon</option>
<option value="Tue">Tue</option>
<option value="Wed">Wed</option>
<option value="Thu">Thu</option>
<option value="Fri">Fri</option>
<option value="Sat">Sat</option>
<option value="Sun">Sun</option>
</select>
</td>
<td class="w-5"><input class="time" type="text" name="Time" required></td>
<td></td>
<td><input type="text" name="Notes"></td>
<td></td>
</tr>
<tr>
<td colspan="9">
<button type="reset" class="btn">Reset</button>
<button type="submit" class="btn btn-success">Save</button>
</td>
</tr>
</tbody>
</table>
I have a table inside a form each row correspond to data that can be extract alone. usualy when i submit the form all row are send to the request post. So i add checkboxes to each row in order to select only the raw that supposed to be send and not the other like the picture bellow :
i have to find a solution but i don't know where to start i have to send the request in ajax
i'm new at coding so if anyone have a lead that can help me resolve this issue or how can i reform my question i will appreciate
my code look like this :
<form action="" method="post">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"><i class="fas fa-inbox"></i></th>
<th scope="col">Consulant</th>
<th scope="col">cra</th>
<th scope="col">taux</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The One</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="">Validité</option>
<option value="">Refuser</option>
</select></td>
<td><input name="taux" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Two</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Three</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input name type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Four</td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td>The Five</td>
<td><select name="" id="">
<option value="">--Choississez le status--</option>
<option value="1">En cours</option>
<option value="2">Validité</option>
<option value="3">Refuser</option>
</select></td>
<td><input name="taux" type="number"></td>
</tr>
</tbody>
</table>
<div class="float-right">
<button class="btn btn-primary" type="submit">Envoyer</button>
</div>
</form>
This ought to work for you within modern browsers.
function submitFormAction(event, form) {
event.preventDefault();
var tbody = document.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var data = new FormData();
for (var row of rows) {
let checked = row.querySelector('input[type="checkbox"]').checked;
let option = row.querySelector('select')
let rate = row.querySelector('input[type="number"]');
if (checked) {
data.append(option.name, option.value);
data.append(rate.name, rate.value);
}
}
fetch("some/url", {
method: "POST",
body: data,
headers: {
"Content-Type": "multipart/form-data"
}
})
.then((response) => {
//Do some stuff
})
.catch((error) => {
//Handle failure
})
}
window.onload = ((event) => {
const form = document.getElementsByTagName('form')[0];
form.onsubmit = ((submitEvent) => submitFormAction(submitEvent, form));
})
Alternatively, if you want the request to be handled through a regular browser form submit, one approach would be to use javascript to copy the selected element values into a second hidden form and submit that one.
It would also be a good idea to add some ids to your important html elements. For example <form id="myForm" action="" method="post"> would let you use document.getElementById('#myForm'); and avoid the [0] collection access. This would also keep your code from breaking if you restructure your page or add more forms.
I manage to retreive the data in a array object :
function submitFormAction(event, form) {
event.preventDefault();
var tbody = document.getElementsByTagName('tbody')[0];
var rows = tbody.getElementsByTagName('tr');
var Test = [];
var data = new FormData();
for (var row of rows) {
let checked = row.querySelector('input[type="checkbox"]').checked;
let consultant = row.querySelector('input[type="text"]');
let option = row.querySelector('select');
let rate = row.querySelector('input[type="number"]');
if(checked) {
Test.push({
'consultant_name': consultant.value,
'Type de cra' : option.value,
'Taux' : rate.value });
}
}
for (key in Test){
data.append('Consultant[]', JSON.stringify(Test[key]));
}
console.log(Test);
var request = new XMLHttpRequest();
request.open("POST", "bottle.php", true);
request.send(data);
}
window.onload = ((event) => {
const form = document.getElementsByTagName('form')[0];
form.onsubmit = ((submitEvent) => submitFormAction(submitEvent, form));
})
<div>
<form action="" method="post">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col"><i class="fas fa-inbox"></i></th>
<th scope="col">Consulant</th>
<th scope="col">cra</th>
<th scope="col">taux</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The One"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" name="taux" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The Two"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The Three"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The Four"></td>
<td><select name="Cras_status[]" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validité</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
<tr>
<th scope="row"><input type="checkbox"></th>
<td><input name="Consulant[]" type="text" value="The five"></td>
<td><select name="" id="">
<option value="">--Choississez le status--</option>
<option value="En_cours">En cours</option>
<option value="Valide">Validé</option>
<option value="Refuser">Refuser</option>
</select></td>
<td><input name="taux[]" type="number"></td>
</tr>
</tbody>
</table>
<div class="float-right">
<button class="btn btn-primary" type="submit">Envoyer</button>
</div>
</form>
</div>
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 need to get from specific table columns in a row. All data should be pushed into an array.
I should take data from each checked row from different columns (1,3,4). Column #4 contains drop-down option and it should take only selected value.
I am having a hard time getting this function to work, it works if I have only one column. I am facing trouble when I am retrieving data from , it retrieves all data from option values, I should get only selected value.
function getData() {
// Enumerate over each checked checkbox
$('input:checked').each(function() {
var row = [];
$(this).closest('tr').find('td:eq(5)').each(function() {
row.push($(this).text());
});
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
Function displays only data from one column. If I add .'td:eg(6)' I got empty array
#Bruno your case is little different and to get the desired result I have updated your code for button click event & it is as follow.
$("#btnSubmit").click(function(){
var rows = [];
$('input:checked').each(function() {
var row = $(this).parent().parent();
var data = {};
$(row).find("td").each(function(i,obj){
if(i == 1){
data.name = $(this).text();
}
else if(i == 3){
data.age = $(this).text();
}
else if(i == 4){
data.country = $(this).find("select").val();
}
})
rows.push(data);
})
console.log(rows);
})
And before implementing it to your code you can play it in here at JS Fiddle Demo.
In fiddle demo open console [F12] you can see your list of selected row value in an array.
Hope this is what you are looking for.
Here i try your result to get select row dropdwun value.
function getData(){
var rows=[];
// Enumerate over each checked checkbox
$('input:checked').each(function () {
var row = [];
var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
var fname=$(this).closest('tr').find('td:nth-child(2)').text();
var lname=$(this).closest('tr').find('td:nth-child(3)').text();
var age=$(this).closest('tr').find('td:nth-child(4)').text();
var vals=[fname ,lname, age, cnty];
row.push(vals);
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(rows);
}
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is how you could have all the selected values on button click. Just iterate over all tr and find select inside and get the value .
function getData(){
$("tr").each(function() {
if($(this).find("select")){
console.log($(this).find("select").val())
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select class="select-cls" id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>