here is my task.
I want to print my popup data but here my problem is I can print popup that had cover only window (actually my popup is very large than window ) but needs to print total popup data . can anyone know about it
Here is my code (whatever I got from the internet)
<div class="modal fade bd-example-modal-lg print" id="printview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content popup-style">
<!--Body-->
<div class="modal-body">
<div class="table-responsive" id="md-table-template">
<table md-colresize="md-colresize" class="table md-table table-data4 tablestyle">
<thead>
<tr>
<th> </th>
<th>Care Plan Name </th>
<th>Type</th>
<th>Category </th>
<th>Start Date </th>
<th> Present on Admission</th>
<th><a href="javascript:window.print()"><i class="fa fa-print color-blue" aria-hidden="true"></i>
</a></th>
</tr>
</thead>
<tbody>
<tr ng-show="noResidentsData"><td colspan="6" >NO RECORDS FOUND</td></tr>
<tr ng-repeat-start="c in residentCareplans" class="md-table-content-row class_{{c.ResidentCarePlanID}}" ng-style="{'text-decoration':(c.CarePlanStatusID==constants.CAREPLAN_STATUS.RETRACT?'line-through':'none')}">
<td><a ng-click="expand = !expand; "><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
<td ng-class="customClass[h.field]" class="md-table-content">{{c.ProblemDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{c.CarePlanTypeID == 1 ? 'Ongoing':(c.CarePlanTypeID == 2)?'Acute':'Discharge'}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{c.CategoryDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{ (c.StartDate | date:'MM/dd/yyyy') }}</td>
<td ng-class="customClass[h.field]" class="md-table-content"><i ng-if="c.PresentOnAdmission == true" class="fa fa-check"></i></td>
<td ng-class="customClass[h.field]" class="md-table-content"> </td>
</tr>
<tr ng-repeat-end="" >
<td colspan="7" class="tableviewexpand">
<div class="col-md-12 scrolldata">
<div class="col-md-12">
<p>Diagnosis:</p>
<div class="col-md-12">
<div class="col-md-6"></div>
<div class="col-md-6">
<span class="pull-right"><input type="checkbox" value="true"> Include Inactive components</span>
<!--<span class="pull-right"><input type="checkbox" value="true">Include Care Plan Notes</span>-->
<span class="pull-right" ><input type="checkbox" value="true" ng-model="includenotes" ng-click="getNotes();">Include Care Plan Notes</span>
</div>
</div>
<div class="col-md-12 gray-bg-1">
<table class="table-goals" width="100%">
<tbody>
<tr>
<td>
<p>Goal:</p>
</td>
<td>
<p>Interventions:</p>
</td>
</tr>
<tr ng-repeat="c in careplan.careGoals track by $index">
<td>
<p>{{c.GoalDescription}}</p>
<table width="100%" class="data-dispay">
<tbody>
<tr>
<td align="left" valign="top">Review Date:</td>
<td align="left" valign="top">{{c.GoalReviewDate | date:'MM/dd/yyyy'}}</td>
</tr>
<tr>
<td align="left" valign="top"> Start Date:</td>
<td align="left" valign="top">{{c.GoalStartDate | date:'MM/dd/yyyy' }}</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="loop-div" ng-repeat="i in c.rcp_interventions track by $index">
<p>{{i.InterventionDescription}}</p>
<table width="100%" class="data-dispay">
<tbody>
<tr>
<td align="left" valign="top">Review Date:</td>
<td align="left" valign="top">{{i.InterventionReviewDate | date:'MM/dd/yyyy' }}</td>
</tr>
<tr>
<td align="left" valign="top">Roles:</td>
<td align="left" valign="top"><span ng-repeat="r in i.rcp_interventionroles">{{r.rolebase.RoleName}}, </span></td>
</tr>
<tr>
<td align="left" valign="top">Frequency:</td>
<td align="left" valign="top"><span ng-repeat="f in i.rcp_interventionfrequency.schedules">{{f.scheduletype.UnitDescription}} </span> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="includenotes"><p>Care Plan Notes: </p>
<span ng-repeat="list in notes">{{list.Text}}, </span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
and css:
#media print
{
.no-print { display: none; }
.print { display: block; }
}
and javascript:
<script>
function Quoter($scope) {
$scope.clientName="TBC";
$scope.projectName="TBC";
$scope.templateNames="";
$scope.amountOfTemplates=1;
$scope.timePerTemplate=4;
$scope.initialSetup=8;
$scope.javascript=10;
$scope.responsiveIncrease=35;
$scope.testingIncrease=30;
$scope.aaAccessibility=30;
$scope.standardTotal=function(){
var totSum=$scope.amountOfTemplates * $scope.timePerTemplate + $scope.initialSetup + $scope.javascript;
return totSum;
};
$scope.percentageOfTotal=function(){
var percent=Math.ceil($scope.responsiveIncrease/100 * $scope.standardTotal());
return percent;
};
$scope.sumResponsive= function() {
if($scope.responsiveBoolean){
var resHrs = Math.ceil($scope.responsiveIncrease/100 * $scope.standardTotal());
}else{
resHrs = 0;
}
return resHrs;
};
$scope.sumTesting= function() {
if($scope.testingBoolean){
var testHrs = Math.ceil($scope.testingIncrease/100 * $scope.standardTotal());
}else{
testHrs = 0;
}
return testHrs;
};
$scope.sumAccessibility= function() {
if($scope.aaAccessibilityBoolean){
var accessibilityHrs = Math.ceil($scope.aaAccessibility/100 * $scope.standardTotal());
}else{
accessibilityHrs = 0;
}
return accessibilityHrs;
};
$scope.total= function() {
var totComp = Math.ceil($scope.standardTotal() + $scope.sumResponsive() + $scope.sumTesting() + $scope.sumAccessibility());
return totComp;
};
$scope.removeTodo = function() {
$scope.todos.pop();
};
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
//$scope.nameTemplates = function() {
// if(templateNames!=""){
// alert("true");
//}
//};
}
</script>
Related
<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body m-3">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Type of Claim</td>
<td id="TypeofClaim" >Data</td>
</tr>
<tr>
<td>Investigation Type</td>
<td id="InvestigationType" >Data</td>
</tr>
<tr>
<td>Customer ID</td>
<td id="CustomerID" >Data</td>
</tr>
<tr>
<td>Name of LA</td>
<td id="NameofLA" >Data</td>
</tr>
<tr>
<td>Date of Birth of LA</td>
<td id="DateofBirthofLA" >Data</td>
</tr>
<tr>
<td>Age at Entry</td>
<td id="AgeatEntry" >Data</td>
</tr>
<tr>
<td>Date of Commencement</td>
<td id="DOC" >Data</td>
</tr>
<tr>
<td>Occupation of LA</td>
<td id="OccupationofLA" >Data</td>
</tr>
</tbody>
</table>
<a href="#">
<button id="StartInvestigationButton" type="button" onclick="startInvestigation()" class="btn btn-primary float-right">Start Investigation</button></a>
</div>
</div>
</div>
</div>
<!--end Modal -->
Here's the function:
function startInvestigation(){
console.log("Investigation Started")
var caseDetails = new Array();
caseDetails[0] = document.getElementById("TypeofClaim").value;
caseDetails[1] = document.getElementById("InvestigationType").value;
caseDetails[2] = document.getElementById("CustomerID").value;
caseDetails[3] = document.getElementById("NameofLA").value;
caseDetails[4] = document.getElementById("DateofBirthofLA").value;
caseDetails[5] = document.getElementById("AgeatEntry").value;
caseDetails[6] = document.getElementById("DOC").value;
caseDetails[7] = document.getElementById("OccupationofLA").value;
console.log(caseDetails);
}
The console log:
[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
Note:
I have done this with table, but now the table is inside a modal and I have no idea on how to do it.
Maybe its because the table is inside the modal, that the values of the td cannot be retrieved and is shown as undefined.
function startInvestigation(){
console.log("Investigation Started")
var caseDetails = new Array();
caseDetails[0] = document.getElementById("TypeofClaim").innerText;
caseDetails[1] = document.getElementById("InvestigationType").innerText;
caseDetails[2] = document.getElementById("CustomerID").innerText;
caseDetails[3] = document.getElementById("NameofLA").innerText;
caseDetails[4] = document.getElementById("DateofBirthofLA").innerText;
caseDetails[5] = document.getElementById("AgeatEntry").innerText;
caseDetails[6] = document.getElementById("DOC").innerText;
caseDetails[7] = document.getElementById("OccupationofLA").innerText;
console.log(caseDetails);
}
TD don't have a value (most html element's don't)
What you area looking for is textContent
caseDetails[0] = document.getElementById("TypeofClaim").textContent;
How do i get the text of each td in each tr of each table?
i tried the code below but didn't work as expected.
HTML CODE
$(function () {
$("[id*=btn").click(function () {
var array1 = [];
$(".normaltable").each(function (index, object) {
var tableData = {};
tableData.datetime = $(this).find('td').eq(0).text().trim();
tableData.item = $(this).find('td').eq(1).text().trim();
tableData.p1 = $(this).find('td').eq(2).text().trim();
tableData.nt = $(this).find('td').eq(3).text().trim();
array1.push(tableData);
});
alert(JSON.stringify(array1));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="title">Group A</h2>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Rice</span></span></a></td>
<td class="p1 ">0:1</td>
<td class="nt ftx">3:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Meat</span></span></a></td>
<td class="p1 ">0:2</td>
<td class="nt ftx ">8:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Wheat</span></span></a></td>
<td class="p1 ">0:1</td>
<td class="nt ftx ">3:1</td>
</tr>
</tbody>
</table>
<h2 class="title">Group B</h2>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Beans</span></span></a></td>
<td class="p1 ">1:1</td>
<td class="nt ftx ">2:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Water</span></span></a></td>
<td class="p1 ">3:1</td>
<td class="nt ftx ">1:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item"><a><span class="tm"><span >Melon</span></span></a></td>
<td class="p1 ">4:1</td>
<td class="nt ftx ">5:1</td>
</tr>
</tbody>
</table>
<input type="button" value="Click" id="btn" />
I got this
[
{"datetime":"09/01/20 19:33","item":"Rice","p1":"0:1","nt":"3:1"},
{"datetime":"10/01/20 19:33","item":"Beans","p1":"1:1","nt":"2:1"}
]
I expected this
[
{"datetime":"09/01/20 19:33","item":"Rice","p1":"0:1","nt":"3:1"},
{"datetime":"09/01/20 19:33","item":"Meat","p1":"0:2","nt":"8:1"},
{"datetime":"09/01/20 19:33","item":"Wheat","p1":"0:1","nt":"3:1"},
{"datetime":"10/01/20 19:33","item":"Beans","p1":"1:1","nt":"2:1"},
{"datetime":"10/01/20 19:33","item":"Water","p1":"3:1","nt":"1:1"},
{"datetime":"10/01/20 19:33","item":"Melon","p1":"4:1","nt":"5:1"}
]
From what I can understand all you really need to change is $(".normaltable").each(function(index, object) { to $(".normaltable tbody tr").each(function(index, object) { then you should get what you wish.
Demo
$(function() {
$("[id*=btn").click(function() {
var array1 = [];
$(".normaltable tbody tr").each(function(index, object) {
var tableData = {};
tableData.datetime = $(this).find('td').eq(0).text().trim();
tableData.match = $(this).find('td').eq(1).text().trim();
tableData.p1 = $(this).find('td').eq(2).text().trim();
tableData.nt = $(this).find('td').eq(3).text().trim();
array1.push(tableData);
});
console.log(JSON.stringify(array1));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Rice
</span>
</span>
</a>
</td>
<td class="p1 ">0:1</td>
<td class="nt ftx">3:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Meat
</span>
</span>
</a>
</td>
<td class="p1 ">0:2</td>
<td class="nt ftx ">8:1</td>
</tr>
<tr class="rw">
<td class="datetime">09/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Wheat
</span>
</span>
</a>
</td>
<td class="p1 ">0:1</td>
<td class="nt ftx ">3:1</td>
</tr>
</tbody>
</table>
<h2 class="title">Group B</h2>
<table class="normaltable">
<thead>
<tr class="header0">
<th class="datetime first">Date</th>
<th class="item">Item</th>
<th class="p1">P1</th>
<th class="nt">NT</th>
</tr>
</thead>
<tbody>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Beans
</span>
</span>
</a>
</td>
<td class="p1 ">1:1</td>
<td class="nt ftx ">2:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Water
</span>
</span>
</a>
</td>
<td class="p1 ">3:1</td>
<td class="nt ftx ">1:1</td>
</tr>
<tr class="rw">
<td class="datetime">10/01/20 19:33</td>
<td class="item">
<a>
<span class="tm">
<span >
Melon
</span>
</span>
</a>
</td>
<td class="p1 ">4:1</td>
<td class="nt ftx ">5:1</td>
</tr>
</tbody>
</table>
<button id="btn1">run</button>
First try to find every table whom have same class name normalTable.
Then try to find each row of the each table.
After getting rows try to find text of td then store it in array
var array1 = [];
$('.normalTable tbody tr').each(function() {
var $tds = $(this).find('td');
if($tds.length != 0) {
var $currText = $tds.eq(0).text();
array1.push($currText);
}
});
I've got a Bootstrap table with dynamically loaded data that I have to filter via a dropdown and multiple inputs.
I've got the inputs working, but I can't seem to figure out how to make the dropdown play nice with the inputs.
When I remove the inputs, I can't seem to get the dropdown to filter.
I'm honestly not quite sure what I'm doing wrong, but I've spent so many hours on this and I'm not sure what else to do.
Below is my code:
<main role="main" class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<label class="table-label mb-3 w-100">
<select id="associationSelect" class="styled-select slate float-right mb-4 table-filter search-key select-table-filter" data-table="order-table" data-column="5">
<option selected="selected" value="">Search by local board</option>
<option value="">All Boards</option>
<option>Realtor Association Name</option>
<option>Business Association</option>
<option>Company Assn</option>
<option>Company Association</option>
</select>
</label>
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="search" id="firstNameInput" placeholder="First name" title="Type in a first name" data-column="0" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="officeNameInput" placeholder="Office name" title="Type in an office name" data-column="2" data-table="order-table">
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="cityTownInput" placeholder="City/Town" title="Type in a city/town name" data-column="3" data-table="order-table">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-md-6">
<input class="mb-3 w-100 search-key light-table-filter" type="text" id="lastNameInput" placeholder="Last name" title="Type in a last name" data-column="1" data-table="membersTable">
</div><!-- /.col-md-6 -->
</div><!-- /.col-row -->
<div class="row">
<div class="col-12">
<table id="membersTable" class="table table-striped table-responsive-sm order-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Business Name</th>
<th scope="col">Address/City</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th class="d-none" scope="col">Association</th>
<th scope="col">Web</th>
</tr>
</thead>
<tbody>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">test</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">testington</td>
<td data-input="business-name">business company</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">business association</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Mister</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Testington</td>
<td data-input="business-name">company name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">Company Assn</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr class="show-all">
<td class="pr-0 mr-0 d-inline-block" data-input="first-name">Ryan</td>
<td class="pl-0 ml-0 d-inline-block" data-input="last-name">Test</td>
<td data-input="business-name">business name</td>
<td data-input="realtor-address">1232 main, Chicago IL</td>
<td data-input="realtor-phone">555-555-5555</td>
<td data-input="realtor-email">test#htmltest.com</td>
<td class="d-none" data-input="realtor-association">realtor association name</td>
<td data-input="web-link"><img src="../img/WebLink.png" alt="Web Link URL - Globe Icon" /></td>
</tr>
<tr id="noResult" class="">
<td> </td>
<td> </td>
<td colspan="" class="text-center">No Results Found</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main><!-- /.container -->
Below is my JS:
jQuery(document).ready(function(){
$(".search-key").on('change input', function() {
var emptyFields = $('.search-key').filter(function() {
return $.trim(this.value) === "";
});
if (emptyFields.length == $(".search-key").length) {
$('table tbody tr').each(function() {
$(this).show();
});
$('#noResult').hide();
} else {
var columnNumber = $(this).data('column');
var enteredValue = $(this).val();
//var enteredValue = $(this).val();
$('table tbody tr:visible').each(function() {
var str = $(this).find('td:eq(' + parseInt(columnNumber) + ')').text();
var search = str.toLowerCase().indexOf(enteredValue.toLowerCase());
if (str.toLowerCase().indexOf(enteredValue.toLowerCase()) == -1) {
$(this).hide();
$('#noResult').show();
} else {
$(this).show();
$('#noResult').hide();
}
});
}//else
});
});
As I said, the inputs work nicely, but I can't figure out how to get the dropdown to work with them. I've tried passing the value to a string and using indexOf to search it, but that doesn't work.
Any help is super appreciated.
Here is a fiddle I created for this:
https://jsfiddle.net/VicePresidentOfAwesome/tcbLqgxp/7/
Anyone with some concept of how I can get this working?
The problem is in this line
$('table tbody tr:visible').each(function() {
// logics here is correct
});
This is how it should work:
For all changed inputs, you need to go through each table row again (no matter it's visible or hidden from the previous search)
Try the following selector
// remove `:visible` selector
$('table tbody tr').each(function() {
// logics here is correct
});
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});
Why the 2 array can't press + or -
So i wanna get this price & quantity will sum and get value in amount
when you also and price and the system will be get the value out in amount the total in below will be change ( it extract from amount )
<table class="table table-striped table-hover">
<thead>
<tr>
<th class="span1" style="text-align:center;">Delete</th>
<th class="span12" style="text-align:center;">Name</th>
<th class="span2" style="text-align:center;">Price</th>
<th class="span2" style="text-align:center;">Quantity</th>
<th class="span2" style="text-align:center;">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center; vertical-align:middle;">
<a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
</td>
<td style="text-align:left; vertical-align:middle;">test</td>
<td style="text-align:center; vertical-align:middle;">24</td>
<td style="text-align:center; vertical-align:middle;">
<div class="input-append">
<input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
<button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
<button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
</div>
</td>+63
<td style="text-align:right; vertical-align:middle;"></td>
</tr>
<tr>
<td style="text-align:center; vertical-align:middle;">
<a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
</td>
<td style="text-align:left; vertical-align:middle;">test</td>
<td style="text-align:center; vertical-align:middle;">24</td>
<td style="text-align:center; vertical-align:middle;">
<div class="input-append">
<input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
<button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
<button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
</div>
</td>+63
<td style="text-align:right; vertical-align:middle;"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td style="text-align:center; vertical-align:middle;">
<strong>Total</strong>
</td>
<td style="text-align:right; vertical-align:middle;"></td>
</tr>
</tfoot>
</table>
The JavaScript is as follows:
button_up=document.getElementById('up');
button_down=document.getElementById('down');
button_up.onclick=function() {setQuantity('up');}
button_down.onclick=function() {setQuantity('down');}
quantity = document.getElementById('quantity[]');
function setQuantity(upordown) {
if (quantity.value > 1) {
if (upordown == 'up') {++quantity.value;}
else if (upordown == 'down') {--quantity.value;}
}
else if (quantity.value == 1) {
if (upordown == 'up') {++quantity.value;}
}
else
{quantity.value=1;}
}
http://jsfiddle.net/Danglebz/ucdpx/
a lot of small fixes
same id for different objects are not good
and the js code have to be more portable, so if you have 1000 lines it'll work
the best way would be to use event delegation but there's a version
function setQuantity(e) {
var upordown = $(e.target).hasClass("up") ? "up" : "down"
, objQt = $(e.target).closest("div").find("input");
if (parseInt(objQt.val(), 10) > 1) {
if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}
else if (upordown == 'down'){objQt.val(parseInt(objQt.val(),10)-1);}}
else if (objQt.val() == 1) {
if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}}
else
{objQt.val(1);}
}
$(".btn").click(setQuantity);
http://jsfiddle.net/ucdpx/2/