jQuery table row highlight onClick and restore onChange alternating css classes - php

First post and new to jQuery. Looked hard but did not find a fully relevant post.
Have alternating row colours in a table; one class NULL/empty one class=alt. jQuery script partially works to highlight the row when clicked.
Question is: how do you use removeClass and then restore (addClass/toggleClass) the specific class that was removed on an onChange event? Any help appreciated. Tks. (See Fiddle below)
HTML
<table id="fooBar" border="0">
<tr>
<th>Text</th>
<th>Text</th>
<th>Text</th>
<th></th>
<th></th>
</tr>
<tr class="">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="alt">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="alt">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
</table>
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
border:1px solid #999999;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
background: #fff;
color: #261F1D;
}
tr:hover, tr.alt:hover {
color: #261F1D;
background-color: #E5C37E;
}
.highlighted {
color: #261F1D;
background-color: #E5C37E;
}
tr.alt {
background: #F5FAFA;
color: #B4AA9D;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
padding: 6px 6px 6px 12px;
}
jQuery
$(document).ready(function () {
$("tr").click(function () {
$(this).closest("tr").siblings().removeClass("highlighted");
$(this).toggleClass("highlighted");
})
});
// Note: currently only works for row without '.alt' css class assigned (ie. empty)
// question is how to replace a class and then RESTORE the class onChange
Here is the jsFiddle: http://jsfiddle.net/codeChaos1988/kh4VY/1/
Also any pointers on best tutorial sites for actually learning to program in javascript/jQuery would be appreciated as well.
Thank you for your help in advance.

So that you don't have to worry about removing/restoring the original class, try changing your css to:
.highlighted {
color: #261F1D !important;
background-color: #E5C37E !important;
}
For JS:
$('table').on('click', 'tr', function () {
var state = $(this).hasClass('highlighted');
$('.highlighted').removeClass('highlighted');
if ( ! state) { $(this).addClass('highlighted'); }
});

Added this in datatable initialisation section:
"createdRow": function( row, data, index ) {
if (tableInitialized){
flashRow( row );
}
This worked!

Related

php table break page with no rows on next page

I am having a php table which contains information about billing of certain numbers. After generating this table I export it in pdf using mpdf.
If the table has a certain number of rows it breaks the page in a weird way, leading the headers repeat on the next page with no rows.
Here is the format of the table:
The table contains up to 3 headers inside <thead> tags, like this:
<table class="items" width="100%" style="font-size: 9pt; border-collapse: collapse;" cellpadding="8">
<thead>
<tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr>
</thead>
rows are added in a while from the database in this way.. nothing special
<tr>
<td>'.$produktNameFromDatabase.'</td>
<td>'.$periodeFromDatabase.'</td>
<td>'.$tidMbFromDatabase.'</td>
<td>'.$enhederFromDatabase.'</td>
<td align="right">'.number_format((float)$produktpris, 2, ',', '.').' kr.</td>
<td align="right"><b>'.number_format((float)$produktpris*(1 + (0.25 * $moms)) - $momsDiscount, 2, ',', '.').' kr.</b></td>
</tr>
with the total lines at the end
<tr>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="blanktotal" colspan="1" rowspan="6"></td>
<td class="totals" colspan="2">Subtotal:</td>
<td class="totals" colspan="2">'.number_format((float)$pris1, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2">Moms:</td>
<td class="totals1" colspan="2">'.number_format((float)$pris1*(0.25 * $moms) - $momsTotal, 2, ',', '.').' kr.</td>
</tr>
<tr>
<td class="totals1" colspan="2"><b>TOTAL:</b></td>
<td class="totals1" colspan="2"><b>'.number_format((float)$pris1*(1 + (0.25 * $moms)) - $momsTotal, 2, ',', '.').' kr.</b></td>
</tr>
</tbody>
</table>
!!! EVERYTHING that you have seen by now, including the totals are a part of the table!
Here is the mpdf settings that I have:
In PhP:
$mpdf=new mPDF('win-1252','A4','','',20,15,48,25,10,10);
$mpdf->useOnlyCoreFonts = true; // false is default
$mpdf->SetProtection(array('print'));
$mpdf->SetTitle("Suggestive Title");
$mpdf->SetAuthor("Author");
$mpdf->SetWatermarkText("Faktura");
$mpdf->showWatermarkText = true;
$mpdf->watermark_font = 'DejaVuSansCondensed';
$mpdf->watermarkTextAlpha = 0.1;
$mpdf->SetDisplayMode('fullpage');
In HTML:
$html .= '<!--mpdf
<htmlpageheader name="myheader">
<table width="100%"><tr>
<td width="50%" style="color:#000000;">
<span style="font-weight: bold; font-size: 14pt;">
Company Name
</span>
Company Information
</td>
<td width="50%" style="text-align: right;">
<img src="image.jpg" />
Invoice Information <br />Side: {PAGENO} af {nb}
</td>
</tr></table>
</htmlpageheader>
<htmlpagefooter name="myfooter">
<div style="border-top: 1px solid #000000; font-size: 9pt; text-align: center; padding-top: 3mm; ">
Footer Stuff
</div>
<div style="font-size: 9pt; text-align: center;">
Other Footer Stuff
</div>
</htmlpagefooter>
<sethtmlpageheader name="myheader" value="on" show-this-page="1" />
<sethtmlpagefooter name="myfooter" value="on" />
mpdf-->';
Some styling that I use
body {font-family: sans-serif;
font-size: 10pt;
}
p { margin: 0pt;
}
td { vertical-align: top; }
.items td {
border-left: 0.1mm solid #000000;
border-right: 0.1mm solid #000000;
}
table thead td { background-color: #d4ffaa;
border: 0.1mm solid #000000;
}
.items td.blanktotal {
background-color: #FFFFFF;
border: 0mm none #000000;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
}
.items td.totals {
text-align: right;
border-top: 0.1mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
.items td.totals1 {
text-align: right;
border-top: 0.0mm solid #000000;
border-right: 0.0mm solid #000000;
border-left: 0.0mm solid #000000;
}
The result looks something like this:
This issue occurs only when the number of rows fills the page. If it overflows it is no major issue, because the table headers are still there on the next page (all of them unfortunately, not only the last one) and the rest of the rows are added further.
How can I get rid of those empty rows, in this special case?
Thank you!
!!EDIT: Added more information, code and a better image of the case. Sorry for not doing it at the first time!
!!EDIT #2: I just observed on other examples that had more than 1 page of rows that the <thead>s keep their position on next pages. It happens all the time. Is there a way to disable that so that other <thead>s will just continue on the next page from the top of the page without remembering the position from the previous page?
You need to set headers (and footers) in individual strings, like this:
require_once __DIR__ . '/../vendor/autoload.php';
$stylesheet = '
.table-header{
border: none;
background-color: yellow;
width: 100%;
}
.table-header td{
border-right: 1px solid;
}
.table-body{
border: none;
background-color: transparent;
width: 100%;
}
.table-body td{
border-right: 1px solid;
border-bottom: 1px solid;
}
.table-footer{
border: none;
background-color: transparent;
width: 100%;
}
.table-footer .td-number{
text-align: right;
}
';
/* Sample data */
$html = '<table class="table-body">';
for ($i = 1; $i <= 100; $i++) {
$html.='<tr>
<td width="30.3%">Forbrug '.$i.'</td>
<td width="23.1%">Periode '.$i.'</td>
<td width="10.76%">'.$i.' MB</td>
<td width="9.28%">Val '.$i.'</td>
<td width="12.9%" align="right">I alt '.$i.'</td>
<td width="13.3%" align="right"><b>moms</b> '.$i.'</td>
</tr>';
}
$html.= '</table>';
$header = '<table class="table-header"><tr>
<td width="30.3%">Forbrug</td>
<td width="23.1%">Periode</td>
<td width="10.76%">Tid/MB</td>
<td width="9.28%">Enheder</td>
<td width="12.9%" align="right">I alt</td>
<td width="13.3%" align="right">I alt+<b>moms</b></td>
</tr></table>';
$footer = '<table class="table-footer"><tr>
<td>Footer here</td>
<td class="td-number"><b>Page N. {PAGENO}</b></td>
</tr></table>';
$mpdf = new mPDF('c','A4','','',15,15,18,15,10,5);
$mpdf->mirrorMargins = 1;
/* Declare headers */
$mpdf->SetHTMLHeader($header);
$mpdf->SetHTMLHeader($header,'E');
/* Declare footers */
$mpdf->SetHTMLFooter($footer);
$mpdf->SetHTMLFooter($footer,'E');
$mpdf->WriteHTML($stylesheet,1);
$mpdf->WriteHTML($html);
$mpdf->Output();
I eventually found a solution. Best way to get rid of these things is to replace <thead> tags with <th>. <thead> has a predefined style which makes the table header repeat itself on every page. <th> will make the header stop repeating itself on the next pages (fortunate or unfortunate), but it will eliminate the space caused by the <thead>'s style

Submit button not centering

I have an HTML form and I have all the inputs except for the submit button in a table. I centered everything in the table besides except for the submit button, even though I tried numerous things to center it to no avail. Please help me center my submit button under my table with the other inputs!
Here is my HTML page:
<html>
<head>
<link rel="stylesheet" href="Site.css">
<?php include("Header.php"); ?>
</div>
</head>
<body>
<div id="main">
<h1>About</h1>
<form action="Insert.php" method="post">
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"></td>
</tr>
</table>
<input type="submit">
</form>
<?php include("Footer.php");?>
</div>
</body>
</html>
And here is my CSS:
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
background-color: #4C875E;
color: #C9C9C9;
}
#main {
padding: 20px;
background-color: #1C404A;
border-radius: 0 4px 4px 4px;
}
h1 {
border-bottom: 3px solid #4C875E;
color: #4C875E;
}
#swag {
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
border-bottom: 0;
text-align: center;
color: #BABABA;
}
ul#menu {
padding: 0;
position: relative;
margin: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: #1C404A;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #C9C9C9;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: #e8eef4;
}
#bg {
background: url(assets/banner.jpg) no-repeat center center fixed;
background-size: 100% auto;
}
table {
margin: 0 auto;
}
Try putting it inside your table:
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"></td>
</tr>
<tr>
<td colspan='2'><center><input type="submit"></center></td>
</tr>
</table>
FIDDLE
Try this:
<tr>
<td><input type="submit"></td>
</tr>
</table>
Working Example
Try this:
<center><input type="submit"></center>
LIVE DEMO
You should put the input button inside the table in a new rowUse td colspan to merge 2 columns To center the button, use attribute align="center".
Code
<table>
<tr>
<td><span>First name:</span></td>
<td><input type="text" name="firstname"/></td>
</tr>
<tr>
<td><span>Last name:</span></td>
<td><input type="text" name="lastname"/></td>
</tr>
<tr>
<td><span>Age:</span></td>
<td><input type="number" name="age"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"/></td>
</tr>
</table>
As far as I know there is no exact way to center things in CSS with a single command. However there are some ways that you can do it manually. I would do one of two things. First (forgive me if this seems too simple) I might just add something like & nbsp;& nbsp;& nbsp;& nbsp;& nbsp; in front of the submit button. So that would just add some space in front of it (and it scales pretty nicely if the user zooms in).
The other thing I would do (and probably the better solution) would be to change the width of the parent div (so that it is just wide enough to fit the form) and then get the width of that like so:
parseInt(getComputedStyle(document.getElementById('main')).width)
divide it by two to get the center, then place the button at the center minus half the width of the button:
parseInt(getComputedStyle(getElementById("mySubmitButtonId")).width)
Note: place it using margin-left

How to Modify the Font Size of the Contents in a Table

In my table I am trying to change the font size. I have tried adding font size in the tag, adding it in the CSS code for the Myposts class, but nothing prevailed. How can I change the font size?
<table width="100%" border="0" class = "Myposts"; align="center" cellpadding="3" cellspacing="1" bgcolor="#686868 " >
<tr>
<td width="6%" align="center" bgcolor="#505050 " ><strong>#</strong></td>
<td width="53%" align="center" bgcolor="#505050 "><strong>Job Description</strong></td>
<td width="15%" align="center" bgcolor="#505050 "><strong>Views</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Replies</strong></td>
<td width="13%" align="center" bgcolor="#505050 "><strong>Date/Time</strong></td>
</tr>
you can select table cells in CSS
table.Myposts tr td {
font-size: 18px;
}
.Myposts td {
font-size: 20px;
}
example in jsfiddle: http://jsfiddle.net/Wk28Y/
Please don't consider this an answer, just a different way of thinking about the issue. FIDDLE
You could get rid of the "bold" line by making the first row <th> instead of <td>.
Add the css table styling to your Myposts class.
You note in the title that it is php, but I don't see any php tags. So I assume you're passing php to an html page, thus the css styling would still work for you.
HTML
<table class = "Myposts">
<tr>
<td>#</td>
<td>Job Description</td>
<td>Views</td>
<td>Replies</td>
<td>Date/Time</td>
</tr>
</table>
CSS
table {
width: 100%;
border: 0px solid black;
background-color: #686868;
border-spacing: 1px;
}
table td {
background-color: #505050;
color: white;
text-align: center;
font-weight: bold;
padding: 3px;
font-size: 20px;
}
table tr td:nth-child(1) {
width: 6%;
}
table tr td:nth-child(2) {
width: 53%;
}
table tr td:nth-child(3) {
width: 15%;
}
table tr td:nth-child(4) {
width: 13%;
}
table tr td:nth-child(5) {
width: 13%;
}

Table does not show row and column borders in email sent using PHP mail

I am using PHP to send mail of a webpage content. I have a table in the page.
My table does not show row and column borders in email sent using PHP mail.
It does not read the CSS in email.
This is my code:
<div id="table_email" style="width:800px;margin-left:50px; text-align: left;">
<table class="table1">
<tr>
<th>Description</th>
<th colspan="2">Amount</th>
</tr>
<tr>
<td>(A)Package Cost</td>
<td>';$formatedMessag .= $inv[0].'</td>
</tr>
<tr>
<td>(B) Insurance </td>
<td>';$formatedMessag .= $inv[1].'</td>
</tr>
<tr>
<td>(C)Flight / Train</td>
<td>';$formatedMessag .= $inv[2].'</td>
</tr>
<tr>
<td>Add :  Service Tax 3% on Rs.(a+b)</td>
<td>';$formatedMessag .=$inv[5].'</td>
</tr>
<tr>
<td>Add :  Educational Cess 2% On 3% </td>
<td>';$formatedMessag .= $inv[6].'</td>
</tr>
<tr>
<td>Add :  Secondary& Higher Education Cess 1% on 3% </td>
<td>';$formatedMessag .= $inv[7].'</td>
</tr>
<tr style=" font-weight: bold;font-size: 12px;background-color:seashell;">
<td>Total Payable Amount</td>
<td>';$formatedMessag .='INR ' . $inv[9].'</td>
</tr>
';$formatedMessag .='
</table>
</div>
This is my CSS:
.table1{
width: 990px;
margin-left: 5px;
border: 1px solid #CDCDCD;
}
.table1 th{
background: none repeat scroll 0 0 #EEEEEE;
padding: 10px;
font-size: 11px;
color: #777777;
border: 1px solid #CDCDCD;
}
.table1 tr{
padding: 10px;
font-size: 11px;
height: 30px;
border: 1px solid #CDCDCD;
}
.table1 tr td:first-child{
font-weight: bold;
text-align: left;
border: 1px solid #CDCDCD;
}
.table1 td{
padding-left: 3px;
border: 1px solid #CDCDCD;
color: #333333;
}
This is because when you sent a mail it can't access the style class,
Instead of this <table class="table1"> use inline css like:
<table style='width: 990px; etc;'>.

problem with css showing the divisions of the page

This is most likely the culprit for this page:
http://www.mypicx.com/04192010/ff/
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
th
{
background-color:#A7C942;
color:white;
}
I don't know why, but the page has some php scripts in it which shows a table from mysql database. As you can see in the url above.
Please help, why do I see those lines everytime I put those css scripts
Looks like your borders are being set to all of the tables in the page, and not just one.
Try something like:
.mytable
{
border-collapse:collapse;
}
.mytable th, .mytable td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
.mytable th
{
background-color:#A7C942;
color:white;
}
And use a class in the HTML on the table you wish to have these borders on:
<table class="mytable">
<tr>
<th>Time</th>
</tr>
<tr>
<td><span class="A">8:00 AM</span></td>
</tr>
</table>

Categories