Jquery.each() iteraring only once - javascript

I have a table which is being filled dynamically on button click
This is my table
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
I am adding to this table on button click using jquery
var stock = Number($('#currentstockinput').val());
var qty = Number($('#tablettosellinput').val().replace(/[^0-9\.]+/g,""));
var pertabprice = Number($('#prodpricetabcapinput').val().replace(/[^0-9\.]+/g,"")).toFixed(2);
var subtotal = qty * pertabprice;
var pkgdate = $('#pkgdateinput').val();
var manufactdate = $('#manufactinput').val();
var expdate = $('#expdateinput').val();
var batchno = $('#s2_1 option:selected').text();
$('#tablebody').prepend('<tr>'+
'<td class="prodname">'+prod+'</td>'+
'<td class="category">'+type+'</td>'+
'<td class="pkgdate">'+pkgdate+'</td>'+
'<td class="manufactdate">'+manufactdate+'</td>'+
'<td class="expdate">'+expdate+'</td>'+
'<td class="batchno">'+batchno+'</td>'+
'<td class="unitprice">'+pertabprice+'</td>'+
'<td class="qty">'+qty+'</td>'+
'<td class="subtot">'+subtotal+'</td>'+
'<td>'+
'<button class="btn btn-link" type="button">Remove</button>'+
'</td>'+
'</tr>');
Upto this, it is working fine
Now I am trying to assign value from each row to dropdown list on button click before submitting my form to servlet
$('#tSortable_2 tbody tr').each(function() {
alert('Adding option');
$('<option>').val($(this).find(".prodname").text()).text($(this).find(".prodname").text()).appendTo('#prodnd');
$('<option>').val($(this).find(".category").text()).text($(this).find(".category").text()).appendTo('#categoryd');
$('<option>').val($(this).find(".pkgdate").text()).text($(this).find(".pkgdate").text()).appendTo('#pkgdated');
$('<option>').val($(this).find(".manufactdate").text()).text($(this).find(".manufactdate").text()).appendTo('#manufactd');
$('<option>').val($(this).find(".expdate").text()).text($(this).find(".expdate").text()).appendTo('#expd');
$('<option>').val($(this).find(".batchno").text()).text($(this).find(".batchno").text()).appendTo('#batchd');
$('<option>').val($(this).find(".unitprice").text()).text($(this).find(".unitprice").text()).appendTo('#unitd');
$('<option>').val($(this).find(".qty").text()).text($(this).find(".qty").text()).appendto('#qtyd');
$('<option>').val($(this).find(".subtot").text()).text($(this).find(".subtot").text()).appendTo('#subtotd');
})
Now if I have multiple rows in my table the above .each() iterates only once and submits the form.
My form tag contains this code
<form action="customerbill" method="post" id="submittest">
<div class="head clearfix">
<div class="isw-grid"></div>
<h1>Purchase Cart</h1>
</div>
<div class="block-fluid table-sorting clearfix">
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable_2">
<thead>
<tr>
<th width="20%">Product</th>
<th width="10%">Category</th>
<th width="10%">Pkg Date</th>
<th width="10%">Mfact date</th>
<th width="10%">Expiry</th>
<th width="10%">Batch No.</th>
<th width="8%">Unit Price</th>
<th width="8%">Qty</th>
<th width="10%">Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="tablebody">
</tbody>
<tfoot id="grandtot">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total:</td>
<td></td>
<td>
</td>
</tr>
</tfoot>
</table>
</div>
<select name="prodnd" id="prodnd" style="display:none" >
</select>
<select name="categoryd" id="categoryd" style="display:none" >
</select>
<select name="pkgdated" id="pkgdated" style="display:none" >
</select>
<select name="manufactd" id="manufactd" style="display:none" >
</select>
<select name="expd" id="expd" style="display:none" >
</select>
<select name="batchd" id="batchd" style="display:none" >
</select>
<select name="unitd" id="unitd" style="display:none" >
</select>
<select name="qtyd" id="qtyd" style="display:none" >
</select>
<select name="subtotd" id="subtotd" style="display:none" >
</select>
<div class="toolbar clear clearfix">
<div class="right">
<div class="btn-group">
<button id="printreport" type="submit" class="btn btn-small btn-warning" onClick="submitForm()"><span>Print</span></button>
</div>
</div>
</div>
</form>
The problem is that the .each() function iterates only once and only the values inside the first row are getting popuated in the dropdown lists.
The .each() function iterates only once when there are multiple rows in table.

You could try this, but I do not believe it will work right off the bat. I need to see more information, but you need to try something new.
$('#tSortable_2').find('tbody').find('tr').each(function(){ //do this });
This will at least give you the array you're looking for in a more correct way. (Less wasteful way?) It isn't a huge fix, or even a real fix it is just something new so try that and we will go from there. Also... fiddle.

Related

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>
I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

How to delete table rows uisng javascript

I want to delete every row from the table using javascirpt Here's the code
I tried using .remove function but it did'nt work out...
HTML TABLE CODE
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
JAVASCRIPT CODE
if(tablebody.children.length > 0)
{
for (let i = 0; i < tablebody.children.length; i++)
{
tablebody.children[i].remove()
}
}
Explination
This will get all tr (rows) for the tables body.
Then it will delete (remove) any that it finds
Solution
let trs = document.querySelectorAll('#table_body tr');
trs.forEach((tr)=>{
tr.remove();
});
Find all table rows, iterate over them using for of then remove each row with Element.remove().
const rows = document.querySelectorAll("#table_body tr");
for (const row of rows) {
row.remove();
}
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td>mess fee</td>
<td>2500</td>
<td>0</td>
<td>
<input
type="number"
id="remaing_amount"
name="remaing_amount[]"
class="form-control"
placeholder="Enter Paid Amount"
/>
</td>
</tr>
</tbody>
</table>
</div>
If you want to delete all tr maybe you should do something like this
document.getElementById('table_body').innerHTML = ''
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr>
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
</div>
Try this way...
const tBody = document.querySelector('#table_body');
const tRow =document.querySelector('#table_body tr')
if (tBody.contains(tRow) {
tRow.remove();
}
try this code:
<div class="card-body">
<table class="table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Total</th>
<th scope="col">Reaming Paid</th>
<th scope="col">To Be Paid</th>
</tr>
</thead>
<tbody id="table_body">
<tr id = "row1">
<td>2</td>
<td> mess fee </td>
<td> 2500 </td>
<td>0 </td>
<td> <input type="number" id="remaing_amount" name="remaing_amount[]" class="form-control" placeholder="Enter Paid Amount"></td>
</tr>
</tbody>
</table>
<button onclick = "deletetr()">
Click here
</button>
<script>
function deletetr() {
document.getElementById("row1").remove();
}
</script>
</div>

How to select last row of a table?

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>

Javascript :not selector not working

I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.
var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
However, for some reason the wrapping still takes place with html in this structure:
<div id='profileContent'>
<table width="100%" class="form">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Any ideas why?
The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.
Instead of putting the :not around the DIV id, put it around the selector for the table itself.
var divs = $("table.form:not(#clientsummarycontainer table) tr td");
.color {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
<div style="float:left;width:100%;">
<h1>Client Profile</h1>
<div class="tab-content client-tabs">
<li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
<ul class="dropdown-menu"></ul>
</li>
<div class="tab-pane active" id="profileContent">
<div id="clientsummarycontainer">
<div class="clearfix">
</div>
<p align="right">
<input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
</p>
<div id="statusfilter">
<form>
<div class="checkall">
<label class="checkbox-inline">
<input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
</div>
</form>
</div>
<form method="post" action="/redacted/clientssummary.php?userid=redacted&action=massaction">
<input type="hidden" name="token" value="redacted">
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="prodsall">
</th>
<th>ID</th>
<th>Product/Service</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td>
<input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
</td>
<td>redacted</td>
<td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - (No Domain)</td>
<td>$0.00 USD</td>
<td>Free</td>
<td>01/06/2016</td>
<td>-</td>
<td>Active</td>
<td>
<img src="images/edit.gif" width="16" height="16" border="0" alt="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="addonsall">
</th>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="domainsall">
</th>
<th>ID</th>
<th>Domain</th>
<th>Registrar</th>
<th>Registration Date</th>
<th>Next Due Date</th>
<th>Expiry Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Date</th>
<th>Total</th>
<th>Valid Until Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-container">
<div class="button-container">
<input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
<input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
<input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
</div>
</div>
</form>
</div>
<script language="javascript">
$(document).ready(function() {
$("#prodsall").click(function() {
$(".checkprods").attr("checked", this.checked);
});
$("#addonsall").click(function() {
$(".checkaddons").attr("checked", this.checked);
});
$("#domainsall").click(function() {
$(".checkdomains").attr("checked", this.checked);
});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>
After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:
var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
if ($('table.form').parents('#clientsummarycontainer').length == 0) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
}

jQuery reset a single table during onchange

I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());

Categories