I'm finally at the point where my email looks great in all clients... Except for Gmail Mobile. Specifically, it's pushing my nav bar links and footer bar links (Which are tables) to the left, instead of centring them.
Any advice?
Nav bar code:
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES
</a></td>
<td width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td>
<td class="ecxh" width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES
</a></td>
<td class="ecxh" width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td>
<td class="ecxh" width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And my footer is similar to this, except using image links instead of text.
After looking at your code, it seems that you have used align="center" attribute to center the table. I would suggest to use CSS instead of HTML attributes. You can use margin:0 auto; CSS property to center an table within it's parent container.
Please see below updated code:
<table class="ecxw320" align="center" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr bgcolor="#000000">
<td height="50">
<!--Use margin:0 auto; to center a table within it's parent container-->
<table style="margin:0 auto;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="20">
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tees" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TEES
</a>
</td>
<td width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/tanks" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">TANKS</a>
</td>
<td class="ecxh" width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/accessories" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">ACCESSORIES
</a>
</td>
<td class="ecxh" width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;"><a moz-do-not-send="true" href="https://partofthekult.com/collections/sale" target="_blank" style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;display:block;white-space:nowrap;">SALE</a>
</td>
<td class="ecxh" width="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="20">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Related
link for image i have written a code which sends invoice details via email after completing the order. but the issue is that when i am running this code in a file.php it is working fine and giving me all the value of variable and executing the while loop
But while mailing, the while() function is not getting execueted and the invoice details are appearing null in the email.
The mail consist of details of the shopping which the user had done.
function sentInvoice($conn,$oid)
{
$url="http://localhost/user/contactus.php";
$date=date('Y');
$nego=0;
$res=mysqli_query($conn,"select order_details.*,product.id,product.pname,orders.total_price from order_details inner join product on product.id=order_details.product_id inner join orders on orders.id=order_details.order_id where order_details.order_id='$oid'");
$row=mysqli_fetch_assoc(mysqli_query($conn,"select orders.*, ecom_users.id,ecom_users.fname,ecom_users.email from orders inner join ecom_users on ecom_users.id=orders.uid where orders.id='$oid'"));
$total=0;
$dateArr=explode(" ",$row['added_on']);
$order_date=$dateArr[0];
$html='<body>
<span class="preheader">This is an invoice for your purchase on '.$order_date.'.</span>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center">
<table class="email-content" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<!-- Email Body -->
<tr>
<td class="email-body" width="100%" cellpadding="0" cellspacing="0">
<table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
<!-- Body content -->
<tr>
<td class="content-cell">
<div class="f-fallback">
<h1>Hi '.$row['fname'].',</h1>
<p>Thanks for using Our Website ShopHana. This is an invoice for your recent purchase.</p>
<table class="attributes" width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="attributes_content">
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="attributes_item">
<span class="f-fallback">
<strong>Amount:'.$row['total_price'].'</strong>
</span>
</td>
</tr>
<tr>
<td class="attributes_item">
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Action -->
<table class="purchase" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<h3>'.$oid.'</h3>
</td>
<td>
<h3 class="align-right">'.$order_date.'</h3>
</td>
</tr>
<tr>
<td colspan="2">
<table class="purchase_content" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th class="purchase_heading" align="left">
<p class="f-fallback">Description</p>
</th>
<th class="purchase_heading" align="right">
<p class="f-fallback">Amount</p>
</th>
</tr>';
while($rem=mysqli_fetch_assoc($res))
{
$pid=$rem['product_id'];
$user_id=$row['uid'];
$a_query=mysqli_fetch_assoc(mysqli_query($conn,"select negotiate from addtocart where pid=$pid and uid=$user_id"));
$nego=$a_query['negotiate'];
echo $nego;
if($nego!=0)
{
$total=$total+$nego;
}
else
{
$total=$total+$rem['price'];
}
//this part is not showing up in the email
$html.='
<tr>
<td width="80%" class="purchase_item"><span class="f-fallback">'.$rem['pname'].'</span></td>
<td class="align-right" width="20%" class="purchase_item"><span class="f-fallback">'.$rem['price'].'</span></td>
</tr>';
}
$html.='<tr>
<td width="80%" class="purchase_footer" valign="middle">
<p class="f-fallback purchase_total purchase_total--label">Total</p>
</td>
<td width="20%" class="purchase_footer" valign="middle">
<p class="f-fallback purchase_total">'.$total.'</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>If you have any questions about this invoice, simply reply to this email or reach out to our support team for help.</p>
<p>Cheers,
<br>The ShopHana Team</p>
<!-- Sub copy -->
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td class="content-cell" align="center">
<p class="f-fallback sub align-center">©'.$date.' ShopHana All rights reserved.</p>
<p class="f-fallback sub align-center">
[SHOPHANA, LLC]
<br>1234 Street Rd.
<br>Suite 1234
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>';
include('smtp/PHPMailerAutoload.php');
$mail=new PHPMailer(true);
$mail->isSMTP();
$mail->Host="smtp.gmail.com";
$mail->Port=587;
$mail->SMTPSecure="tls";
$mail->SMTPAuth=true;
$mail->Username="somemail9245#gmail.com";
$mail->Password="passwords";
$mail->SetFrom("shophana2337#gmail.com");
$mail->addAddress($row['email']);
$mail->IsHTML(true);
$mail->Subject="Invoice Details";
$mail->Body=$html;
$mail->SMTPOptions=array('ssl'=>array(
'verify_peer'=>false,
'verify_peer_name'=>false,
'allow_self_signed'=>false
));
if($mail->send()){
return true;
}else{
return false;
}
}
I tried to set the alignment of image and text in HTML table and generate pdf using jsPDF but I was unable to set proper image alignment along with text, your help saves my day
[![enter image description here][1]][1]
Here is my code, your help is most appreciated
<html>
<head>
<title>Theme1</title>
</head>
<body>
<table style="width: 565px;margin: 15px; border:4px solid #ddd;font-size: 12px;position: relative; color: #212529">
<tr style="width: 100%">
<td style="width: 100%">
<table>
<tr>
<th style="text-align: center;" colspan="3" width="100%">
<h4>Biodata</h4>
</th>
</tr>
<tr rowspan="4">
<td colspan="2" style="padding: 15px; width: 80%">
<table>
<tr>
<td style="width: 50%">
<b>Name</b>
</td>
<td style="width: 50%">
{{name}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Father Name</b>
</td>
<td style="width: 50%">
{{fatherName}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Father's Occupation</b>
</td>
<td style="width: 50%">
{{fatherOccupation}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Mother Name</b>
</td>
<td style="width: 50%">
{{motherName}}
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Mother's Occupation</b>
</td>
<td style="width: 50%">
{{motherOccupation}}
</td>
</tr>
</table>
</td>
<td style="width: 20%">
<img src="{{profileImage}}" width="100" style="border-radius: 5px; border-width: 1px ;border-color: #4e555b; border-style: solid; width: 100px;" />
</td>
</tr>
<tr>
<td width="35%">
<b>email</b>
</td>
<td width="35%">
{{email}}
</td>
</tr>
<tr>
<td width="35%">
<b>Date of Birth</b>
</td>
<td width="35%">
{{dob}}
</td>
</tr>
<tr>
<td width="35%">
<b>Place of Birth</b>
</td>
<td width="35%">
{{placeOfBirth}}
</td>
</tr>
<tr>
<td width="35%">
<b>Occupation</b>
</td>
<td width="35%">
{{occupation}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I tried for a day but it still persists
If I interpreted your target state correctly, this might be helping you to achieve what you want.
<span style="display: flex; justify-content:center; margin-top:2em">
<h1>Biodata</h1></span>
<table style="margin-left: 2em;text-align:left">
<tr>
<th>Name</th>
<td>{{name}}</td>
<td rowspan=5 style="background-color: red;">Image here</td>
</tr>
<tr>
<th>Father's name</th>
<td>{{fathersName}}</td>
</tr>
<tr>
<th>Mother's name</th>
<td>{{mothersName}}</td>
</tr>
<tr>
<th>Mother's occupation</th>
<td>{{mothersOccupation}}</td>
</tr>
<tr>
<th>eMail address</th>
<td>{{emailAddress}}</td>
</tr>
<tr>
<th>Date of Birth</th>
<td>{{dateOfBirth}}</td>
</tr>
<tr>
<th>Place of Birth</th>
<td>{{placeOfBirth}}</td>
</tr>
<tr>
<th>Occupation</th>
<td>{{occupation}}</td>
</tr>
</table>
Table has to be displayed in front end. Following is the code.
<logic:present name="searchStudent">
<table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0">
<caption><b><bean:message key="label.student.details.display"/></b></caption>
<tr>
<td align="center"><b><bean:message key="label.student.class.code"/></b></td>
<td align="center"><b><bean:message key="label.student.name.code"/></b></td>
<td align="center"><b><bean:message key="label.student.section.code"/></b></td>
<td align="center"><b><bean:message key="label.edit" /></b></td>
<td align="center"><b><bean:message key="label.delete" /></b></td>
</tr>
<logic:iterate name="searchStudent" id="row">
<tr>
<td rowspan="2">
<bean:write name="row" property="sclass" />
</td>
<td>
<bean:write name="row" property="sname" />
</td>
<td>
<bean:write name="row" property="section" />
</td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();updateStudent(this);"
type="image"
src="${pageContext.request.contextPath}/images/pen_edit_thick.png"
class="imgEditPen"
title="<bean:message key="button.tooltip.edit"/>"></td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();deleteStudent();"
type="image"
src="${pageContext.request.contextPath}/images/icon_delete.gif"
class="imgEditPen"
title="<bean:message key="button.tooltip.remove"/>"></td>
</tr>
</logic:iterate>
</table>
</logic:present>
It has three columns in table namely class,student name and section. Since class is same for some student it has to spanned across students having same class. Following is the sample output.
Data is fetched from Backend.
Colspan Attribute can merge columns in a table.
<td colspan="2">Sum: $180</td>
Example
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Result
Refer: https://www.w3schools.com/tags/att_td_colspan.asp
Rowspan Attribute:
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
https://www.w3schools.com/tags/att_td_rowspan.asp
This Jquery datatable example says I have to add a <th> for every column, because of handlers. I have this example, I added an extra row of empty headers, to be able to create a datatable.
Is there a way to create datatable without adding this extra row of headers? I need colspan in the header (doesn't matter if I loose the sorting for the first 2 columns, with colspan header).
HTML code:
<table id="reportTable0" border="0" class="table" cellspacing="1" cellpadding="0">
<thead>
<tr>
<th rowspan="1" colspan="2" class="dim_ctg sorting">
Measure
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 1 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 2 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 3 </div>
</th>
<th valign="top" colspan="1" class="dim_title">
<div class="th-inner sortable both"> Academy 4 </div>
</th>
<th nowrap="" class="dim_ctg">
<div class="th-inner sortable both">
<span class="modal-trigger" data-toggle="modal" data-target="#' + modal3Id + '">AVG</span>
</div>
</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_1 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">77.64</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.33</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.85</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">76.33</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">76.79</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_2 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.60</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">78.44</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.39</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">77.58</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">78.84</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_3 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.40</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.07</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.67</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.04</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.14</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_4 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.72</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.76</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.89</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.36</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.92</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> CASE_REPORT_5 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.69</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.31</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.83</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.83</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.68</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> EXAM_1 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.12</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">82.37</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.13</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">83.36</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">83.56</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> EXAM_2 </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">80.21</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.91</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.25</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">79.45</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">80.81</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> Final Mark </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">82.07</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.29</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.52</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">81.28</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">81.53</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> MIDTERM </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.85</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.69</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.87</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">84.80</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">84.81</div>
</td>
</tr>
<tr>
<td align="left" class="dim_title_left"> Course name </td>
<td align="left" class="dim_title_left" rowspan="1"> MR_GB </td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="dim_val" nowrap="">
<div align="right" class="val">0</div>
</td>
<td align="center" class="tot_val" nowrap="">
<div align="right" class="sum">0</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="dim_ctg" nowrap="">
<span class="modal-trigger" data-toggle="modal" data-target="#">Course </span>
</td>
<td class="dim_ctg" nowrap="">
<span class="modal-trigger" data-toggle="modal" data-target="#">Component </span>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_1">80.99</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_2">80.10</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_3">80.58</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_4">80.13</div>
</td>
<td align="center" class="tot_sum" nowrap="">
<div align="right" class="sum" id="divTC_12_5">80.46</div>
</td>
</tr>
</tfoot>
</table>
JavaScript code:
var options = {
sDom: 'rt'
};
$('#reportTable0').DataTable(options);
Just add three resource and datatable will work
<script src="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"></script>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
Also remove This Section
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
I have an invoice.jsp page where I have to calculate some value in the textbox using jQuery or with any other way.
I don't know much about jQuery. Please help me to solve this problem.
In my invoice there is a quantity textbox. If the user enters the quantity then the calculated price should be calculated dynamically i.e (total_subPrice= unit_price * quantity) and shown in another textbox called "price".
And again the total sum of all the prices should appear in the button as a Total.
Please note: all the row values are coming from my database table based on the selection of items by users.
I have used only this code to show values in my invoice.jsp page:
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center" >
<s:textfield value="%{price}" name="" size="6"></s:textfield>
</td>
</tr>
</s:iterator>
And my invoice.jsp output looks like this:
I have no idea how to calculate the line Total based on the quantity chosen and also display the sum of all the line total in the grand total textbox (see below invoice image).
I also tried this but I am still unable to solve my problem.
My full JSP code:
<table width="100%" height="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74%">
<s:form action="dfs" id="form3" theme="simple">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" id="your_content">
<tr>
<td valign="top" height="10%">
<div id="invNum">Invoice# 12688</div>
<div id="ttielMain">Vision Books</div>
<div id="Orgaddress"> Thamel Kathmandu Nepal</div>
<div id="phoneNum"> Tel# 00977-1-12173803</div>
<div id="websiteOrg"> www.thebestbookfinder.com</div>
</td>
</tr>
<tr>
<td valign="top" width="100%" align="left">
----------------------------------------------------------- -----------------------------------
</td>
</tr>
<tr>
<td height="6%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;font-family: serif;font-weight: bold;font-size: 14px;">
<td width="65%" align="left">Title</td>
<td width="10%" align="left">Unit Price</td>
<td width="10%" align="center">Qty</td>
<td width="15%" align="left">Line Total</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="65%" align="left">
-------------------------------------------------------
</td>
<td width="10%" align="left">----------</td>
<td width="10%" align="center">-----</td>
<td width="15%" align="left">-------------</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="65%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<s:iterator value="#session.BOK" status="userStatus">
<tr style="height: 10px;">
<td width="65%" align="left"><s:property value="bookTitile"/></td>
<td width="10%" align="left"><s:property value="price"/></td>
<td width="10%" align="center"><s:textfield name="quantity" value="%{quantity}" size="2" /></td>
<td width="15%" align="center"><s:textfield value="%{price}" name="" size="6"></s:textfield></td>
</tr>
</s:iterator>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: b">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
<s:textfield name="subtotal" value="%{'' + #attr.total}" size="5"> </s:textfield>
</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">Discount:<sj:textfield name="amt" size="1" placeholder=" %"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: bolder;">
<s:set var="total" value="%{0}" />
<s:iterator value="#session.BOK">
<s:set var="total" value="%{price + #attr.total}" />
</s:iterator>
Total: <s:property value="%{'' + #attr.total}" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
--------------------------------------------------------------------------------------------------
</td>
</tr>
</table>
</td>
</tr>
As #flow said, use .change():
$(function() {
$('input[name^="quantity"]').change(function() {
var unitprice = $(this).siblings('input[name^="unitprice"]').val();
$(this).siblings('input[name^="price"]')
.val($(this).val() * unitprice);
});
});
Use .change() on your inputs.
jQuery Docs - Change