I have a table with a checkbox in the table head which I want to use to check/uncheck all the checkboxes in my table. This is my code, but it doesn't work.
$(document).on('change', '#select_products_checkbox', function() {
$('.form-control').toggleClass('selected');
var selectAllProductsIsChecked = $('#select_products_checkbox').prop('checked');
$('.form-control .form-control').each(function(i, v) {
$(v).prop('checked', selectAllProductsIsChecked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
if you pass your event into the change function you can just use the currentTarget checked to set your checked prop on your other checkboxes:
$(document).on('change', '#select_products_checkbox', function(e) {
$('.form-control')
.toggleClass('selected', e.currentTarget.checked)
.prop('checked', e.currentTarget.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t}</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
To do what you require you can use the closest() and find() methods to find the checkboxes in the tbody of the table related to the 'All' checkbox. Then you can use prop() to set their checked state to match. Similarly you can provide a boolean to toggleClass() to add or remove the class based on whether or not the 'All' was checked.
$(document).on('change', '#select_products_checkbox', function() {
$(this).closest('table').find('tbody :checkbox')
.prop('checked', this.checked)
.toggleClass('selected', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<td class="col-md-1">
<input class="form-control" type="checkbox" id="select_products_checkbox">
</td>
<td class="col-md-1 text-center">{t}Product ID{/t} - SELECT ALL</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
<tr>
<td>
<input name="{$price_list_products_checkbox}[]" value="{$productID}" class="form-control" type="checkbox">
</td>
<td class="text-center">
{$productID}
</td>
</tr>
</tbody>
</table>
Related
I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Below are my html code and onchange(). I am not getting any error message but the changes I require in the
The html is for a shopping cart where there are columns for each product that is in the cart and the last column of each row is for the total price of the product which needs to be changed as we increase the quantity.
function WO() {
var tbody = document.getElementById("cartSection");
for (var i = 0; i < tbody.rows.length; i++) {
var row = tbody.rows[i];
var qty = row.cells[3].childNodes[0].value;
var price = row.cells[2].childNodes[0].nodeValue;
var answer = (Number(qty) * Number(price)).toFixed(2);
row.cells[5].childNodes[0].nodeValue = answer;
}
document.getElementById("inputNumber").onchange = function() {
myFunction()
};
function myFunction() {
row.cells[5].childNodes[0].nodeValue = (Number(qty) * Number(price)).toFixed(2);
};
};
WO();
<div class="cart-section">
<table class="table cart-table table-responsive-xs striped-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
<tbody id="cartSection">
<tr>
<td>
<img src="/web/product/89/1569065085-thumb.jpg" alt="">
</td>
<td>Black formal shoe
</td>
<td class="amount">
449.00</td>
<td>
<input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">898.00</td>
</tr>
<tr>
<td>
<img src="/web/product/94/1569065206-thumb.jpg" alt="">
</td>
<td>Slim brown leather shoe
</td>
<td class="amount">
800.00</td>
<td>
<input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1600.00</td>
</tr>
<tr>
<td>
<img src="/web/product/93/1569065178-thumb.jpg" alt="">
</td>
<td>Dual Colour Formal
</td>
<td class="amount">
500.00</td>
<td>
<input type="number" name="quantity" id="inputNumber" class="form-control input-number" value="2" onchange="myFunction">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1000.00</td>
</tr>
</tbody>
</table>
<table class="table cart-table table-responsive-md">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2>$6935.00</h2>
</td>
</tr>
</tfoot>
</table>
<div class="row cart-buttons">
<div class="col-6">continue shopping</div>
<div class="col-6">check out</div>
</div>
</div>
Here is a start. You had many issues
function WO() {
var tbody = document.getElementById("cartSection");
for (var i = 0; i < tbody.rows.length; i++) {
var row = tbody.rows[i];
var qty = row.cells[3].childNodes[0].value;
var price = row.cells[2].childNodes[0].nodeValue;
var answer = (Number(qty) * Number(price)).toFixed(2);
row.cells[5].childNodes[0].nodeValue = answer;
}
document.getElementById("cartSection").addEventListener("change",function(e) {
var tgt = e.target;
if (tgt.name==="quantity") {
var row = tgt.closest("tr");
var qty = Number(tgt.value);
var amt = Number(row.querySelector(".amount").innerText.trim());
console.log(qty,amt)
row.querySelector(".totalprice").innerText = (amt*qty).toFixed(2);
}
})
};
WO();
<div class="cart-section">
<table class="table cart-table table-responsive-xs striped-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
<tbody id="cartSection">
<tr>
<td>
<img src="/web/product/89/1569065085-thumb.jpg" alt="">
</td>
<td>Black formal shoe
</td>
<td class="amount">
449.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">898.00</td>
</tr>
<tr>
<td>
<img src="/web/product/94/1569065206-thumb.jpg" alt="">
</td>
<td>Slim brown leather shoe
</td>
<td class="amount">
800.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1600.00</td>
</tr>
<tr>
<td>
<img src="/web/product/93/1569065178-thumb.jpg" alt="">
</td>
<td>Dual Colour Formal
</td>
<td class="amount">
500.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice">1000.00</td>
</tr>
</tbody>
</table>
<table class="table cart-table table-responsive-md">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2>$6935.00</h2>
</td>
</tr>
</tfoot>
</table>
<div class="row cart-buttons">
<div class="col-6">continue shopping</div>
<div class="col-6">check out</div>
</div>
</div>
UPDATE: Trigger the change on each to calculate from start. Missing here is a totalling of all
window.addEventListener("load", function() {
[...document.querySelectorAll("[name=quantity]")].forEach(function(qty) {
qty.addEventListener("change", function(e) {
var tgt = e.target;
var row = tgt.closest("tr");
var qty = Number(tgt.value);
var amt = Number(row.querySelector(".amount").innerText.trim());
row.querySelector(".totalprice").innerText = (amt * qty).toFixed(2);
});
});
var event = new Event('change');
// Dispatch it.
[...document.querySelectorAll("[name=quantity]")].forEach(function(qty) {
qty.dispatchEvent(event);
})
})
<div class="cart-section">
<table class="table cart-table table-responsive-xs striped-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
<tbody id="cartSection">
<tr>
<td>
<img src="/web/product/89/1569065085-thumb.jpg" alt="">
</td>
<td>Black formal shoe
</td>
<td class="amount">
449.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice"></td>
</tr>
<tr>
<td>
<img src="/web/product/94/1569065206-thumb.jpg" alt="">
</td>
<td>Slim brown leather shoe
</td>
<td class="amount">
800.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice"></td>
</tr>
<tr>
<td>
<img src="/web/product/93/1569065178-thumb.jpg" alt="">
</td>
<td>Dual Colour Formal
</td>
<td class="amount">
500.00</td>
<td>
<input type="number" name="quantity" class="form-control input-number" value="2">
</td>
<td><i class="ti-close"></i></td>
<td class="totalprice"></td>
</tr>
</tbody>
</table>
<table class="table cart-table table-responsive-md">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2>$6935.00</h2>
</td>
</tr>
</tfoot>
</table>
<div class="row cart-buttons">
<div class="col-6">continue shopping</div>
<div class="col-6">check out</div>
</div>
</div>
I have a spreadsheet of data and input fields.
When the input field is empty, it should click the copy text button from the row with class "shipdate". I always copy the entry in the code. Can anyone tell me where I'm wrong.
This is my code
$(".btn-yes").click(function() {
var $val = $(document).find('.date');
$('.date').each(function() {
var $val = $(this).val();
if ($val === "") {
$('tr').each(function() {
var $this = $(this),
daata = $this.find('td.shipdate').html();
$this.find('input').val(anData);
})
} else(
console.log("empty")
)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>
You likely meant this. Note I had to trim and remove the trailing dot in the shipdate
You can remove the .slice(0,-1) if the shipdate cell contains a date without a trailing dot
You can also freely change $(this).parent().next().text() to $(this).closest("tr").find(".shipdate").text()
in case you want to move the cells around
$(".btn-yes").click(function() {
$('.date').each(function() {
var $val = $(this).val();
var shipdate = $.trim($(this).parent().next().text()).slice(0,-1)
$(this).val($val === "" ? shipdate : $val)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th>Example1</th>
<th>Example2</th>
<th>Example3</th>
<th>Example4</th>
</tr>
</thead>
<tbody>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
<tr>
<td> text1</td>
<td> text2 </td>
<td> <input type="text" value="" class="date" /> </td>
<td class="shipdate"> 31.10.2019.</td>
</tr>
</tbody>
</table>
<div>
<button class="btn-yes">
Click here
</button>
</div>
</div>
I have the following div:
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
How do I make it select the last row of it with javascript or jquery? I've tried doing it like this
$("[.OrderList][tr:last]").focus();
But with no success
Use this code:
.OrderList >.table > tbody > tr:last-child { background:#ff0000; }
Try this :
$('#yourtableid tr:last').attr('id');
or this:
$("#TableId").find("tr").last();
Hope this if helpful :)
console.log($(".OrderList tr").last().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
Try this code You can achieve it by:
$('#first table:last tr:last')
$('#yourtableid tr:last').attr('id').focus();
or
$('#yourtableid tr:last')[0].focus();
should work.
console.log($(".OrderList table tr:last").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
Can somebody help me how to collect data from input fields from tbl_number in one array array_tbl[number] and object_number in other arrays_object[number] with JQuery when HTML looks like
<div id="devices" style="width:95%;">
<div id="device_1" style="background-color:#858585;">
<table id="tbl_device_1">
<tbody>
<tr>
<th>Slave</th>
<th>Instance</th>
<th>Object Name</th>
<th>Model Name</th>
<th>Delete</th>
<th>Add Object</th>
</tr>
<tr>
<td>
<input id="slave_address_1" class="in" type="text"/>
</td>
<td>
<input id="instance_1" class="in" type="text"/>
</td>
<td>
<input id="object_name_1" class="in" type="text"/>
</td>
<td>
<input id="model_name_1" class="in" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#device_1').remove();" title="Delete"/>
</td>
<td>
<input class="btn_add" type="button" onclick="add_object_row(1);" title="Add new object" style="float:none;"/>
</td>
</tr>
</tbody>
</table>
<br>
<div id="device_objects_1" style="width:100%;">
<table id="object_1" style="margin-left:30px;">
<tbody>
<tr>
<th>Type</th>
<th>Instance</th>
<th>Object Name</th>
<th>Val Type</th>
<th>Position</th>
<th>Units</th>
<th>Quot</th>
<th>Shift</th>
<th>Delete</th>
</tr>
<tr>
<td>
<input id="type_1" class="in_short" type="text"/>
</td>
<td>
<input id="instance_1" class="in_short" type="text"/>
</td>
<td>
<input id="object_name_1" class="in_short" type="text"/>
</td>
<td>
<input id="val_type_1" class="in_short" type="text"/>
</td>
<td>
<input id="position_1" class="in_short" type="text"/>
</td>
<td>
<input id="units_1" class="in_short" type="text"/>
</td>
<td>
<input id="quot_1" class="in_short" type="text"/>
</td>
<td>
<input id="shift_1" class="in_short" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#object_1').remove();"/>
</td>
</tr>
</tbody>
</table>
<table id="object_1" style="margin-left:30px;">
<tbody>
<tr>
<th>Type</th>
<th>Instance</th>
<th>Object Name</th>
<th>Val Type</th>
<th>Position</th>
<th>Units</th>
<th>Quot</th>
<th>Shift</th>
<th>Delete</th>
</tr>
<tr>
<td>
<input id="type_2" class="in_short" type="text"/>
</td>
<td>
<input id="instance_2" class="in_short" type="text"/>
</td>
<td>
<input id="object_name_2" class="in_short" type="text"/>
</td>
<td>
<input id="val_type_2" class="in_short" type="text"/>
</td>
<td>
<input id="position_2" class="in_short" type="text"/>
</td>
<td>
<input id="units_2" class="in_short" type="text"/>
</td>
<td>
<input id="quot_2" class="in_short" type="text"/>
</td>
<td>
<input id="shift_2" class="in_short" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#object_1').remove();"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="device_6" style="background-color:#C2C2C2;">
<table id="tbl_device_6">
<tbody>
<tr>
<th>Slave</th>
<th>Instance</th>
<th>Object Name</th>
<th>Model Name</th>
<th>Delete</th>
<th>Add Object</th>
</tr>
<tr>
<td>
<input id="slave_address_6" class="in" type="text"/>
</td>
<td>
<input id="instance_6" class="in" type="text"/>
</td>
<td>
<input id="object_name_6" class="in" type="text"/>
</td>
<td>
<input id="model_name_6" class="in" type="text"/>
</td>
<td>
<input class="btn_del" type="button" onclick="$('#device_6').remove();" title="Delete"/>
</td>
<td>
<input class="btn_add" type="button" onclick="add_object_row(6);" title="Add new object" style="float:none;"/>
</td>
</tr>
</tbody>
</table>
<br>
<div id="device_objects_6" style="width:100%;">
<table id="object_6" style="margin-left:30px;">
<tbody>
<tr>
<th>Type</th>
<th>Instance</th>
<th>Object Name</th>
<th>Val Type</th>
<th>Position</th>
<th>Units</th>
<th>Quot</th>
<th>Shift</th>
<th>Delete</th>
</tr>
<tr>
<td>
<input id="type_3" class="in_short" type="text"/>
</td>
<td>
<input id="instance_3" class="in_short" type="text"/>
</td>
<td>
<input id="object_name_3" class="in_short" type="text"/>
</td>
<td>
<input id="val_type_3" class="in_short" type="text"/>
</td>
<td>
<input id="position_3" class="in_short" type="text"/>
</td>
<td>
<input id="units_3" class="in_short" type="text"/>
</td>
<td>
<input id="quot_3" class="in_short" type="text"/>
</td>
<td>
<input id="shift_3" class="in_short" type="text">
</td>
<td>
<input class="btn_del" type="button" onclick="$('#object_6').remove();"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
With this code u can get values of inputs that has class 'in' to in array_tbl array
var array_tbl = []
$('.in').each(function(){
array_tbl.push($(this).val())
})