We Keep Coding

How to get one or more data when we do click in checkbox?

I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}

This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.

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.each() iteraring only once

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.

Getting text of html elements via Jquery

I am trying to get the dynamically generated text from a list and show it tin alert dialog in jquery mobile app but its not working
Here is what i have tried
HTML
<center>
<div class="preview ui-shadow swatch cus-bg-bdy" style="max-width:50em;text-align:left;">
<div style="border-color: #DDDDDD !important;text-align:left;" class="ui-bar ui-bar-a">
<h3>Customers</h3>
</div>
<div style="padding:1em;">
<table>
<tr>
<td>Name :</td>
<td>Dummy Name</td>
</tr>
<tr>
<td>Address :</td>
<td>Dummy Address</td>
</tr>
</table>
<fieldset id="download_c_list" data-role="controlgroup" data-iconpos="left" data-filter="true" data-filter-placeholder="Search here..." data-count-theme="a">
<label>
<input type="radio" name="customer">
<table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td><font class="customer-name">Company-1</font>
</td>
</tr>
<tr>
<td><font class="customer-adress">Stradbroke Island.</font>
</td>
</tr>
</tbody>
</table>
</label>
<label>
<input type="radio" name="customer">
<table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td><font class="customer-name">Shope-1</font>
</td>
</tr>
<tr>
<td><font class="customer-adress">address-1.</font>
</td>
</tr>
</tbody>
</table>
</label>
<label>
<input type="radio" name="customer">
<table data-role="table" data-mode="reflow" class="ui-responsive" style="font-weight: normal;">
<thead>
<th></th>
</thead>
<tbody>
<tr>
<td><font class="customer-name">customer-1</font>
</td>
</tr>
<tr>
<td><font class="customer-adress">Address-2.</font>
</td>
</tr>
</tbody>
</table>
</label>
</fieldset>
</div>
</div>
</center>
Jquery
$("input[name=customer]:radio").change(function () {
alert($($($(this).siblings('label')).children("[name='custerm-name']")).html());
});
I want to show customer name and address of clicked item in alert box , here is the Fiddle http://jsfiddle.net/SzaBw/

Try the following
$("input[name=customer]:radio").change(function () {
var parent = $(this).parent();
alert(parent.find(".customer-name").text());
alert(parent.find(".customer-adress").text());
});
Note: you have typo in customer-address class

You need to update you alert code to this
alert($(this).closest(".ui-radio").find(".customer-name").text())
alert($(this).closest(".ui-radio").find(".customer-address").text())
here is the Fiddle for above code

Try this:
$("#download_c_list input:radio").change(function () {
var label = $(this).prev();
var customerName = label.find('.customer-name').first();
var customerAdress = label.find('.customer-adress').first();
alert(customerName.html() + ' - ' + customerAdress.html());
});