I'm having a problem wherein I want to use PrintJS library in PHP. I created a PHP file which is invoice.php that is what I want to print out as a PDF using the library. I also created a JavaScript function in which I call the printJS function. How can I able to view the PHP file as a PDF using JavaScript
This is my invoice.php in which I want to print out using the JavaScript function in which I added the printJS function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
<title>VShip Invoice</title>
<style>
body {
margin-left: auto;
margin-right: auto;
width: 210mm;
height: 297mm;
}
.invoice {
border-collapse: collapse;
width: 100%;
}
p {
font-family: 'Open Sans';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Raleway';
}
.invoice td,
th {
padding: 8px;
border-left: 2px solid #d3d3d3;
border-right: 2px solid #d3d3d3;
}
.invoice td {
font-family: 'Open Sans';
}
.invoice th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #d3d3d3;
color: white;
text-transform: uppercase;
font-family: 'Open Sans';
}
input {
background: transparent;
border: none;
border-bottom: 1px solid #5c5c5c;
}
/* .container {
align-items: center;
display: flex;
justify-content: center;
} */
<body>
<div class="container">
<div class="content">
<!-- Logo -->
<div style="text-align:center;">
<div>
<img src="<?= base_url('assets/images/vivmo-logo.png') ?
>" alt="logo" style="width:180px;" class="logo-default" />
</div>
<div style="line-height:0.4;">
<p>5730 Roseville Rd, Sacramento, CA 95842</p>
<p>+1 844 90 VIVMO(844-908-4866)</p>
<p>support#vivmo.co</p>
</div>
</div>
<!-- End Logo -->
<!-- Bill Information Heading -->
<div style="padding-top:15px;">
<!-- Bill To -->
<div style="float:left;padding-left:30px;">
<div>
<h3 style="font-weight:800;margin-top:18px;margin-
bottom:0px;">Bill To:</h3>
</div>
<div style="margin-top:-10px;">
<h4 style="margin-bottom:0px;">Client's Name</h4>
<div style="line-height:0.4;margin-top:-8px;">
<p>5730 Roseville Rd</p>
<p>Sacramento, CA 95842</p>
</div>
</div>
</div>
<!-- End Bill To -->
<!-- Bill Invoice Number -->
<div style="float:right;">
<div style="background-color:#d3d3d3;padding:1px 61px 1px 10px;">
<h3 style="font-family:'Open Sans';color:#fff;margin-top:8px;margin-bottom:8px;font-size:1.5em;padding-left:30px;padding-right:30px;">INVOICE #0001</h3>
</div>
<div style="padding-left:25%;">
<p style="margin-top:5px;margin-bottom:5px;font-size:13.5px;font-weight:500;">Date: 10-12-2022</p>
</div>
</div>
<!-- End Bill Invoice Number -->
</div>
<!-- End Bill Information Heading -->
<br>
<!-- Bill Information Table -->
<div style="margin-top:18%;padding-left:30px;padding-right:30px;">
<table class="invoice">
<tr>
<th>Description</th>
<th>QTY</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr>
<td>Apple iPhone 6S 16GB</td>
<td style="text-align:right">2</td>
<td style="text-align:right">$999</td>
<td style="text-align:right">$999</td>
</tr>
<tr style="border-bottom:2px solid #d3d3d3;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<!-- End Bill Information Table -->
<!-- Bill Information Total -->
<div style="margin-top:20px;">
<div style="float:left;background-color:#d3d3d3;width:50%;">
<div style="text-align:center;padding-top:13%;padding-bottom:13%;">
<h3 style="color:#fff;font-family:'Open Sans';font-size:1.6em;padding-left:16%;padding-right:16%;">THANK YOU FOR YOUR BUSINESS!</h3>
</div>
</div>
<div style="float:right;padding-right:30px;">
<table>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;">Subtotal</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Subtotal Less Discount</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Tax Rate(%)</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;">Total Tax</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
<tr>
<td style="font-family:'Open Sans';float:right;font-size:13px;padding-top:8px;padding-bottom:8px;">Shipping/Handling</td>
<td><input type="text" value="$999" style="text-align:right;"></td>
</tr>
</table>
<table>
<hr style="border:1px solid #d3d3d3;">
</table>
<div style="float:left;margin-left:30%;">
<h3 style="margin-top:0px;font-family:'Open Sans';">Total</h3>
</div>
<div style="float:right;">
<h3 style="margin-top:0px;font-family:'Open Sans';font-weight:800;">$999,000</h3>
</div>
</div>
</div>
<!-- End Bill Information Total -->
<!-- Billing Terms and Instruction -->
<div style="margin-top:33%;padding-left:30px;padding-right:30px;">
<div>
<div>
<h3 style="font-size:15px;">Terms & Instruction</h3>
</div>
</div>
<div style="border:1px solid #d3d3d3;">
<div style="padding:18px;">
<p style="font-size:13px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum fugit quaerat quos cupiditate soluta? Quasi voluptatibus debitis consequuntur asperiores saepe.
</p>
</div>
</div>
</div>
<!-- End Billing Terms and Instruction -->
<!-- Billing Footer -->
<div style="background-color:#d3d3d3;margin-top:30px;">
<div>
<div style="padding:1px 30px;">
<h5 style="color:#fff;font-family:'Raleway';font-weight:500;">vivmo.co</h5>
</div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- End Billing Footer -->
</div>
</div>
And this is the function in which I add the PrintJS function to print the PHP file
function print_invoice()
{
printJS({
printable: base_url + "shipment/invoice",
type: 'pdf',
targetStyles: ['*']
})
}
You can use like this way
function print_invoice() {
printJS({
printable: "<?php echo base_url; ?>" + "shipment/invoice.php",
type: 'pdf',
targetStyles: ['*']
})
}
function getFileAndPrint() {
// Generate pdf and get its filename
// Assuming your are writing this in a .php file
let printFile = '<?php echo $variable; ?>'
// Freedom to do anything else you may want to
// ...
// Pass pdf to printJS
printJS(printFile)
}
Related
I have two tables parent and child now I want to link the child table data with the parent heading cell. I can't change the code structure like removing the child table because this is done in Odoo and also js link with this structure. I tried a lot but didn't achieve the correct output.
The HTML code is
Note: These columns should have more width depending upon their table data columns are Account, Partner, Subject
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Current Output of the table
So even though these tables are seperated, we can still use some styling to at least make it look like it's one table. But yeah the structure is quite bad and it would help a lot if you could make sure each row has always the same amount of columns. That the first row has 4 columns and the second one 8 does make this kind of a Hail Mary.
But the general idea is you give each column the width it needs.
/* Default to hide some generated styling*/
ul{ display:none; }
.p-0{ padding: 0!important; }
tbody{ font-size: 14px!important; }
table table {margin-bottom: 0!important; }
table table td { border-top: none!important; }
/*A small zoom(out) and min-width if screen is not big enough */
.container-fluid{ zoom: 0.8; min-width: 1100px; }
/* Default for 8 columns if they all would be equal*/
th, td{ width: 12.5%; }
/*The "Magic", specific widths for each column */
/*Obviously works best if each row has 8 columns*/
/*Play with it, but make sure it adds up to 100%*/
th:nth-child(1),
td:nth-child(1){
width: 20%;
}
th:nth-child(2),
td:nth-child(2){
width: 10%;
}
th:nth-child(3),
td:nth-child(3){
width: 5%;
}
th:nth-child(4),
td:nth-child(4){
width: 20%;
}
th:nth-child(5),
td:nth-child(5){
width: 15%;
}
th:nth-child(6),
td:nth-child(6),
th:nth-child(7),
td:nth-child(7),
th:nth-child(8),
td:nth-child(8){
width: 10%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>General Ledger</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid align_tables my-3">
<table style='background-color:white;color:#4A4F59;padding:20px;border-spacing: 0;'
class="table" cellspacing="0" width="100%">
<thead style='color: #4e4c4c;' class="ks_thead">
<tr>
<th style="padding-bottom:20px">Account</th>
<th style="padding-bottom:20px">Date</th>
<th style="padding-bottom:20px">JRNL</th>
<th style="padding-bottom:20px">Partner</th>
<th style="padding-bottom:20px">Subject</th>
<th style="padding-bottom:20px">Debit</th>
<th style="padding-bottom:20px">Credit</th>
<th style="padding-bottom:20px">Balance</th>
</tr>
</thead>
<tbody style='font-size:14px;font-weight:normal'>
<tr class="ks_py-mline" >
<td colspan="5">
<span>
120002 - Outstanding Receipts
</span>==
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
<td>
<span>$ 7,270.00</span>
</td>
</tr>
<tr>
<td class="p-0" colspan="12">
<ul class="ks_py-mline-ul m-0 ">
<li></li>
</ul>
<div class="ks_py-mline-table-div">
<table class="table">
<tbody class='remove_body' style='font-size:12px'>
<tr style='border-bottom: 1px solid #eee;'>
<td>
<span>BNK1/2022/09/0002</span>
</td>
<td >
<span>09/18/2022 </span>
</td>
<td>
<span> BNK1 </span>
</td>
<td>
<span> Acts Software Distribution Limited - 1223 </span>
</td>
<td>
<span> INV/2022/00005-303 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
<span> $ 7,270.00 </span>
</td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have written some code to convert html in a bootstrap modal to image in jpeg format.
It is working fine but in the image it is showing some scroll bar(s). In this code I didn't include any scrollbar.
How to resolve this problem. can any one please help me. example image here I have included one image, I am getting scrollbar like this when I click on the download button.
$(document).on("click", "#jpgfrmt", function() {
domtoimage.toJpeg(document.getElementById('download'), {
quality: 0.95
})
.then(function(dataUrl) {
var link = document.createElement('a');
link.download = 'astDetails.jpeg';
link.href = dataUrl;
link.click();
});
});
#download {
background: #fff;
color: #000;
width: auto;
height: auto
}
#buttons {
margin: 0 auto;
display: inline;
}
#jpgfrmt {
float: right;
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dom-to-image/2.6.0/dom-to-image.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<div id="content" class="content">
<div id="buttons">
<div class="action_btn">
<a href="javascript:;" id="jpgfrmt" class="btn btn-xs btn-warning m-b-10">
<i class="fa fa-download m-r-5"></i> Download
</a>
</div>
</div>
<div class="row" id="download">
<div class="col-md-8">
<div class="table-responsive">
<table class="table">
<tr>
<td style="border:none;">
<table class="table">
<tr>
<td class="field highlight" width="25%" style="border:none;">Name:</td>
<td width="75%" style="border:none;">
Name
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Description:</td>
<td width="75%" style="border:none;">
Description
</td>
</tr>
<tr>
<td class="field" width="25%" style="border:none;">Serial No:</td>
<td width="75%" style="border:none;">
Serial Number
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
I have designed collapsible accordion and in that I placed a table.
I am unable to remove bottom boder of the td and side border of the table. I tried to make no-tr.no-bottom-border td {border-bottom: none; but it not working.
I tried to declare the class as outside and made tried border-bottom none but it didn't work.
Imported bootstrap js and css
<style>
table {
margin-left: 40px;
margin-right:auto;
margin-top: 10px;
}
tr.no-bottom-border td {
border-bottom: none;
}
.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
padding: 2px;
font-weight: lighter;
font-size: 11px;
line-height: 1.428571429;
vertical-align: top;
}
#outside{
border-style: none;
}
</style>
</head>
<body>
<div class="container ">
<div class="col-md-6 ">
<div class="panel panel-default ">
<div class="panel-heading " style="background-color: #b3daff; ">
<h4 class="panel-title ">
<a href="# "><span class="glyphicon glyphicon-remove "
style="color: red "></span></a> <a data-toggle="collapse "
data-parent="#accordion " href="#collapseTwo "> <span
style="font-weight: 700; ">Educational Details</span> <span
class="glyphicon glyphicon-plus " style="color: red "> </span>
<span class="glyphicon glyphicon-pencil " style="color: red "> </span>
</a>
</h4>
</div>
<div id="collapseTwo " class="panel-collapse collapse ">
<table class="table table-bordered responsive ">
<thead>
<tr>
<th bgcolor=" #b3daff ">Degree</th>
<th bgcolor=" #b3daff ">Stream</th>
<th bgcolor=" #b3daff ">Yr of Passing</th>
</tr>
</thead>
<tbody>
<tr>
<th>10th</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "> View Edit</td>
</tr>
<tr>
<th style="font-weight: 400px; ">12th*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row " >Bachelors*</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">Masters</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C1</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C2</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C3</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr>
<th scope="row ">C4</th>
<td></td>
<td></td>
<td class="outside " style="border-collapse: collapse; border: none; "> View Edit</td>
</tr>
<tr class="no-bottom-border ">
<th >C5</th>
<td></td>
<td></td>
<td class="outside " style="border-style: none; border-bottom-style: none; "> View Edit</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!----Ends second column-------->
</div>
<!----Ends accordion column-------->
</div>
<!-- BS example ends here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any Ideas?
Here is the updated code:
https://codepen.io/creativedev/pen/gKPXJR
I have added
.table-bordered{
border: none;
}
and removed
tr.no-bottom-border td {
border-bottom: none;
}
When I run your code snippet, I don't see any border-bottom in the table or any of the cells.
The underline below the links View, Edit is the default text-decoration style for tag. Set it to none like below if you don't want it
#outside a {
text-decoration: none;
}
I have a list which has one primary list name, and 10 sublists under it, which i don't want to display on my html page at a time. I want to display 4 sublists on the page and a link as "more". The moment I hover my mouse on the "more" link, it should show the rest sublinks.
This is my complete code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script >
$(document).ready(function(){
$("#planning_more").hover(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
<!--
a:link {color:#03F; text-decoration:none; text-emphasis:none} /* unvisited link */
a:visited {color:#03F; text-decoration:none} /* visited link */
a:hover {color:#F30; text-decoration:none} /* mouse over link */
#planning_panel,#planning_more
{
text-align:center;
}
#planning_panel
{
padding:50px;
display:none;
}
.style2 {font-size: 13px;
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.style4 {
font-size: 18px;
font-weight: bold;
color: #FF6600;
}
.style44 {
background-image:url('Background.jpg');
}
.style45 { border-left-style: solid; border-left-color: #F60; border-left-width:thin; }
.style46 { position:relative; top: 50px; }
.style6 {color: #000000}
.auto-style1 {
color:#039;
}
-->
</style>
</head>
<body>
<div align="center">
<img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base">
<table width="800" border="0" cellspacing="0" cellpadding="5" height="627" class="style44">
<tr>
<td colspan="2" height="11" width="790">
</td>
</tr>
<tr>
<td width="263" valign="top" height="602" align="left">
<table class="style46">
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Planning</font></td></tr>
<tr><td>web-ecommerce--where-to-begin</td></tr>
<tr><td>introduction-to-ecommerce</td></tr>
<tr><td>web-site-analysis----a-study-in-damag</td></tr>
<tr><td>set-up-your-own-blog-free</td></tr>
<tr id="planning_more"><td align="right">More...</td></tr><br>
<div id="planning_panel">
planning
</div>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Designing & Hosting</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Marketing</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
<tr><td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4" >Technology</font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td align="right">More...</td></tr>
</table></td>
<td width="537" valign="top" height="602" class="style45">
<h1 align="center"><span class="auto-style1"><font size="5">eCommerce: What is it?</font></span><br>
</h1>
<p class="MsoNormal" align="left" height="12" class="style45"><span class="style2">my text
</span>
</p>
</tr>
</table>
<hr width="800" noshade>
<span class="style6"><br>
<span class="style2"></span></span></div>
</body>
</html>
But this is not working. Kindly help.
Checkout the working code here: http://jsfiddle.net/loesch/rhTNC/
Your missing </table> tag seems to be causing issues. Try
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#planning_more").hover(function(){
$("#planning_panel").slideToggle("fast");
});
});
</script>
<style type="text/css">
<!--
#planning_panel,#planning_more
{
text-align:center;
}
#planning_panel
{
padding:50px;
display:none;
}
-->
</style>
<table class="style46">
<tr>
<td><font color="#0000FF" face="Georgia, Times New Roman, Times, serif" size="4">Planning</font></td>
</tr>
<tr>
<td>web-ecommerce--where-to-begin</td>
</tr>
<tr>
<td>introduction-to-ecommerce</td>
</tr>
<tr>
<td>web-site-analysis----a-study-in-damag</td>
</tr>
<tr>
<td>set-up-your-own-blog-free</td>
</tr>
<tr id="planning_more">
<td align="right">More...</td>
</tr>
<br />
</table>
<div id="planning_panel">
planning
</div>
I have 5 listcell when I click on one listcell the color of it should be changed to green, next time when I click of another listcell, the color of previous should be reset and newly clicked should become green.i.e only one listcell can be green at one time.
5 listcell is just an example in actual case, the listcells are variable i.e of any number. They are created at runtime and appended to listitem.I donnot have ID of the listcells. The html is send from server side. How can i achieve this using java script.
I want an generic solution. What actually happens in case of radio Groups, can provide hint to my question.
My Table (Confusing ? Code is not needed to address my question. added it beacuse of first comment on question):
<TABLE style="TABLE-LAYOUT: fixed" id=d0DQ35-cave border=0 cellSpacing=0
cellPadding=0 width="100%">
<TBODY style="HEIGHT: 0px; VISIBILITY: hidden">
<TR id=d0DQ45-bdfaker class=z-listbox-faker>
<TH style="WIDTH: 222px" id=d0DQ55-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ65-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ75-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ85-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH style="WIDTH: 161px" id=d0DQ95-bdfaker class=z-listheader>
<DIV style="OVERFLOW: hidden"></DIV>
</TH>
<TH id=d0DQ45-bdfakerflex></TH>
</TR>
</TBODY>
<TBODY id=d0DQ35-tpad>
<TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY id=d0DQ35-rows>
<TR id=d0DQa5 class=z-listitem>
<TD id=d0DQb5 class=z-listcell>
<DIV id=d0DQb5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN id=d0DQa5-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQl5 class=z-label>LABEL</SPAN>
</DIV>
</TD>
<TD id=d0DQm5 class=z-listcell>
<DIV id=d0DQm5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQn5 class=z-label>5</SPAN>
</DIV>
</TD>
<TD id=d0DQo5 class=z-listcell>
<DIV id=d0DQo5-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQp5 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQx9 class=z-listcell>
<DIV id=d0DQx9-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQy9 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQ_a class=z-listcell>
<DIV id=d0DQ_a-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQ1a class=z-label>0 (0.0%)</SPAN>
</DIV>
</TD>
</TR>
<TR id=d0DQe9 class="z-listitem z-listbox-odd">
<TD id=d0DQn1 class=z-listcell>
<DIV id=d0DQn1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN id=d0DQe9-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQo1 class=z-label>ID</SPAN>
</DIV>
</TD>
<TD id=d0DQp1 class=z-listcell>
<DIV id=d0DQp1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQq1 class=z-label>5</SPAN>
</DIV>
</TD>
<TD id=d0DQr1 class=z-listcell>
<DIV id=d0DQr1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQs1 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQt1 class=z-listcell>
<DIV id=d0DQt1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
id=d0DQu1 class=z-label>5 (100.0%)</SPAN>
</DIV>
</TD>
<TD id=d0DQv1 class=z-listcell>
<DIV id=d0DQv1-cave class="z-listcell-cnt z-overflow-hidden">
<SPAN
id=d0DQw1 class=z-label>0 (0.0%)</SPAN>
</DIV>
</TD>
</TR>
</TBODY>
<TBODY id=d0DQ35-bpad>
<TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY style="DISPLAY: none" id=d0DQ35-empty class=z-listbox-empty-body>
<TR>
<TD colSpan=5>No Columns Selected!</TD>
</TR>
</TBODY>
</TABLE>
Thanks,
Aman
css:
.selected { background: green }
js:
$('td').click(function () {
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
EDIT: Proof of concept http://jsfiddle.net/SKUqG/