I have an onclick function in my HTML: <td onclick showDep(this, <?= $id;?>) >
I would like to change the background of the relative table row that has a specific ID, e.g. clicking on first row function I want to go to the row that has id="4".
function showDep(t, id) {
$(t).closest('tr').each(function() {
$.find('.rowDep').attr('id' = id).css({
'background': 'gray'
})
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td onclick="showDep(this, $<?= $id;?>)"><b>Movements</b> </td>
</tr>
<tr class=" rowDep " id="26 ">
<td>Landing</td>
</tr>
<tr class="rowDep " id="8 ">
<td><input type="time " class="landing " value="<?=$v[ 'landing'];?>"></td>
</tr>
<tr>
<td>Block</td>
</tr>
<tr class="rowDep" id="4">
<td><input type="time" class="block" value="<?=$v['block'];?>"></td>
</tr>
<tr>
<td><button onclick="sendMVT(this, <?=$id;?>)" class="inpBtnSave" type="button">MVT</button> </td>
</tr>
Related
I have an html table where users can enter values into the table. How can I display the totals of each column and row as well as the total of the totals in the table?
<table>
<tr>
<td>
<input value = "0"></input>
</td>
<td>
<input value = "0"></input>
</td>
<td>
Total:
</td>
</tr>
<tr>
<td>
<input value = "0"></input>
</td>
<td>
<input value = "0"></input>
</td>
<td>
Total:
</td>
</tr>
<tr>
<td>
Total:
</td>
<td>
Total:
</td>
<td>
Total:
</td>
</tr>
</table>
My table:
<table border="1">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="tdvalcol1" value = "0"></input>
</td>
<td>
<input class="tdvalcol2" value = "0"></input>
</td>
<td class="totalrow">
Total:
</td>
</tr>
<tr>
<td><input class="tdvalcol1" value = "0"></input></td>
<td><input class="tdvalcol2" value = "0"></input></td>
<td class="totalrow">
Total:
</td>
</tr>
<tr>
<td id="totalcol1">
Total:
</td>
<td id="totalcol2">
Total:
</td>
<td id="totalcorner">
Total:
</td>
</tr>
</tbody>
</table>
the jquery:
col1Sum =0;
col2Sum =0;
rowtotals =0;
$(".tdvalcol1").each(function(index,value) {
tdvalue = this.value;
col1Sum += parseFloat(tdvalue);
});
$("#totalcol1").text(col1Sum);
$(".tdvalcol2").each(function(index,value) {
tdvalue = this.value;
col2Sum += parseFloat(tdvalue);
});
$("#totalcol2").text(col2Sum);
$("tr").each(function() {
rowSum =0;
var cols = $(this).find("input");
cols.each(function() {
rowSum += parseFloat(this.value);
});
rowtotals +=rowSum;
$(this).find(".totalrow").text(rowSum)
});
How will I properly display data from database to textbox when the button "search" is clicked? It should display the item name and the price of that product code
enter image description here
Controller
public ActionResult Index(string searchString)
{
using(MyDatabaseEntities db = new MyDatabaseEntities())
{
var products = from s in db.Products
select s;
if (!String.IsNullOrEmpty(searchString))
{
products = products.Where(s => s.ProductCode.Equals(searchString));
}
return View(products.ToList());
}
}
Index
<div class="form-group">
<table style="text-align:left; margin-bottom:10px;">
<tr>
<td>Item Code</td>
<td>#Html.TextBox("SearchString")
</td>
<tr style="background-color:lightgray;">
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="btn btn-block btn-info"id="buttonsearch" value="Search" />
</td>
</tr>
<tr>
<td> </td>
</tr>
#foreach (var item in Model) {
<tr>
<td style="text-align:left;">Item Name</td
<td>#Html.DisplayFor(modelItem=> item.ProductName)</td>
</tr>
<tr>
<td>Unit Price</td>
<td style="text-align:right;">#Html.DisplayFor(modelItem => item.Price)</td>
</tr>
}
<tr>
<td style="text-align:left;">Quantity</td>
<td>
<input type="text" id="quantity" class="input-sm" />
<span class="error">Product Name required</span>
</td>
</tr>
<tr>
<td style="text-align:left;">Discount</td>
<td>
<input type="text" id="discount" class="input-sm" style="text-align:right;" placeholder="0.00" />
<span class="error">Product Name required</span>
</td>
</tr>
</table>
</div>
Instead of .ToList() use .FirstOrDefault(); just in case you want to populate one record in your textbox.
i have a question. Did not found answer before, or it wasn't exacly my problem.
I'm building static app, and i need to have table like this on the page. (They are just binded in the angular... I'm new in it and i have stuck.
<table class="table table-responsive table-striped">
<thead>
<tr>
<th class="text-center"></th>
<th class="text-center">1st</th>
<th class="text-center">2nd</th>
<th class="text-center">3rd</th>
<th class="text-center">4th</th>
<th class="text-center">5th</th>
<th class="text-center">6th</th>
</tr>
</thead>
<tbody>
<tr>
<td>First header</td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute1" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute2" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute3" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute1" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute2" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute3" /></td>
</tr>
And it goes further... (ie. myModel.myData[3] (with 3 attributes), myModel.myData[4] (with 3 attributes) , myModel.myData[5] (with 3 attributes) )
Now... i have to count:
How much attributes1 (with whole myModel.MyData[1 to N]) are selected
How much attributes2 (with whole myModel.MyData[1 to N]) are selected
And so on...
All i got now, that i can accces to the value, by: {{ myModel.myData[1].attribute1 }}
But it returns me true/false (that is good) - but can't acces to this in controller. (My controller js file is almost clear, so i don't put it here)
If some1 could help me, where i can search solution i would be thankfull.
Look this:
when checkbox is clicked, this call the function for populate array with data of this. After you can get lenght of array using lenght.
var app = angular.module('StarterApp', []);
app.controller('AppCtrl', function($scope){
$scope.myModel = {myData1: [], myData2: [], myData3: []};
$scope.getChecked = function(){
console.log($scope.myModel.myData1);
console.log($scope.myModel.myData2);
console.log($scope.myModel.myData3);
}
$scope.toggleSelection = function (data, value) {
var idx = data.indexOf(value);
// is currently selected
if (idx > -1) {
data.splice(idx, 1);
}
// is newly selected
else {
data.push(value);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="StarterApp" ng-controller="AppCtrl" class="table table-responsive table-striped">
<thead>
<tr>
<th class="text-center"><button type="button" ng-click="getChecked()"> Get checked </button></th>
<th class="text-center">1st</th>
<th class="text-center">2nd</th>
<th class="text-center">3rd</th>
<th class="text-center">4th</th>
<th class="text-center">5th</th>
<th class="text-center">6th</th>
<th class="text-center">7th</th>
<th class="text-center">8th</th>
<th class="text-center">9th</th>
</tr>
</thead>
<tbody>
<tr>
<td>
First header
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check1')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check2')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check3')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check1')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check2')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check3')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check1')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check2')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check3')"/>
</td>
</tr>
</tbody>
</table>
If you need the count in your controller, then i guess you need to loup through the checkboxes. As in
$scope.attribute1Counter = 0;
angular.forEach($scope.myModel.myData, function(data){
if(data.attribute1 === true){
$scope.attribute1Counter++
}
});
Pull underscore.js into your project and use _.where (http://underscorejs.org/#where) to get the count in your controller.
I am trying to generate bill for the customer.When I add items in the form and click on add button I want it to create table and show the bill. But its not working fine. I tried to use sql query but it is showing only 2 items and sometimes blank. when there are 3 4 items inserted into database. Please any one can clear me where am going wrong.
<tr>
<td height="517"><form name="form1" method="post" action="">
<table width="400" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td colspan="2"><div align="center">Add item Details </div></td>
</tr>
<tr>
<td width="117">Item Name</td>
<td width="243"><input name="itemName" type="text" id="itemName">
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input name="qty" type="text" id="qty"></td>
</tr>
<tr>
<td>Price </td>
<td><input name="price" type="text" id="price"></td>
</tr>
<tr>
<td>Vat </td>
<td><input name="vat" type="text" id="vat"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Add"></td>
</tr>
</table>
</form>
<p align="center">Bill Record</p>
<p align="center"> </p>
<table width="70%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Price</div></th>
<th>Vat</th>
<th>total</th>
</tr>
<% double grandTotal=0;
try
{
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from bill where cname='"+session.getAttribute("cname")+"' order by datetime asc");
while(rs.next())
{
%>
<tr>
<td><%=rs.getString("itemName")%></td>
<td><%=rs.getString("qty")%></td>
<td><%=rs.getString("price")%></td>
<td><%=rs.getString("vat")%></td>
<td><%= rs.getString("total") %></td>
<% grandTotal+=Double.parseDouble( rs.getString("total"));%>
</tr>
<%
} %>
<tr>
<td></td>
<td></td>
<td></td>
<td>grandTotal</td>
<td><%= grandTotal %> </td>
</tr>
<% con.close();
}
catch(Exception e)
{
out.println("Error: "+e);
}
%>
</table>
</tr>
And here is the code where I am adding values into database.
<%
if(request.getMethod().equals("POST"))
{
String itemName="";
int qty;
double price,vat,total;
grandTotal=0;
boolean exists=false;
itemName=request.getParameter("itemName");
qty=Integer.parseInt(request.getParameter("qty"));
price=Double.parseDouble(request.getParameter("price"));
vat=Double.parseDouble(request.getParameter("vat"));
total=price+vat;
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
Date date = new Date();
try
{
Statement st=con.createStatement();
st.executeUpdate("INSERT into bill values('"+session.getAttribute("cname")+"','" + dateFormat.format(date) + "','"+itemName+"','"+qty+"','"+price+"','"+vat+"','"+total+"','"+grandTotal+"')");
out.println("<script> alert('Item Added Successfully')</script>");
}
My problem is that in my registration form when it has error message and the user tries to changed tab and back again to registration the error message are still there what should I do to be able to remove the error message when I changed the tabs and when I click again the registration link?
<script src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script>
$(function() {
var tabContainers = $('section.tabs > article');
tabContainers.hide().filter('#login').show();
$('.ultabs a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('.ultabs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
function check_email() {
var email=$("#textEmail").val();
$.ajax(
{
type:"POST",
url:"register.php",
data: {
'email': email
},
success:function(msg) {
$("#checkEmail").html(msg);
}
});
return false;
}
function check_password() {
var pass=$("#textPassword").val();
$.ajax(
{
type:"POST",
url:"register.php",
data: {
'pass': pass
},
success:function(msg) {
$("#checkPassword").html(msg);
}
});
return false;
}
</script>
<nav id="siteNav">
<h1>Navigation</h1>
<ul class="ultabs">
<li>Login</li>
<li>Register</li>
</ul>
</nav>
<section id="siteContent" class="tabs">
<h1>Section</h1>
<article id="login">
<h1>Login</h1>
<table>
<tr>
<td class="message" colspan="2"></td>
</tr>
<tr>
<td>E-mail:</td><td><input type="email"></td>
</tr>
<tr>
<td class="message" colspan="2"></td>
</tr>
<tr>
<td>Password:</td><td><input type="password"></td>
</tr>
<tr>
<td colspan="2"><input type="button"></td>
</tr>
</table>
</article>
<article id="register">
<h1>Register</h1>
<table>
<tr>
<td class="message" colspan="2"></td>
</tr>
<tr>
<td>Name:</td><td><input type="text"></td>
</tr>
<tr>
<td id="checkEmail" class="message" colspan="2"></td>
</tr>
<tr>
<td>E-mail:</td><td><input id="textEmail" type="email" onblur="return check_email()"></td>
</tr>
<tr>
<td id="checkPassword" class="message" colspan="2"></td>
</tr>
<tr>
<td>Password:</td><td><input id="textPassword" type="password" onblur="return check_password()"></td>
</tr>
<tr>
<td class="message" colspan="2"></td>
</tr>
<tr>
<td>Re-type:</td><td><input type="password"></td>
</tr>
<tr>
<td colspan="2"><input type="button"></td>
</tr>
</table>
</article>
</section>
I would suggest you use a validator plugin like the one provided by Bassistance - http://bassistance.de/jquery-plugins/jquery-plugin-validation/ . It will handle the error messages without you getting into the nitty gritty of validation....
You can clear the td on change of the tab
$('.ultabs a').click(function () {
$('.message').html('');
// the rest of your code
});