Print only certain part of the <div> content - javascript

I have the following JavaScript code to print a content
<script type="text/javascript">
function Print(print)
{
Popup($(print).html());
}
function Popup(data)
{
var mywindow = window.open("", "print");
mywindow.document.write("<html><head><title>Report</title>");
mywindow.document.write("</head><body>");
mywindow.document.write("<div align='center'>");
mywindow.document.write(data);
mywindow.document.write("</div>");
mywindow.document.write("</body></html>");
mywindow.print();
mywindow.close();
return true; }
</script>
And in my HTML I have the following code:
<html>
<body>
<p>Print</p>
<div id="print">
<h1>Report</h1>
<table>
<tr><th>Date</th><th>Remarks</th><th>Amount</th><th>Actions</th></tr>
<tr>
<td>10/11/2014</td>
<td>Hello</td>
<td>$14</td>
<td>Edit</td>
</tr>
</table>
</div>
</body>
</html>
I want to print only the first 3 columns. I do not want to print the 4th Column "Actions". When I try to print out the content by using the above code it prints all the 4 columns. Please help me with the following.

You can simply put the style to display none with id for that td's
Inside HTML:
....
<th id="act">Actions</th>
....
<td id="act">Edit</td>
Inside JS:
mywindow.document.write("<html><head><style>#act{display:none;}</style><title>Report</title>");

You can do that with jquery.
$(document).ready(function(){
$('.tabel').find(':nth-child(4)').hide();
});
JSFIDDLE HERE

Related

Insert image into table cell in Javascript

I want to insert images to the new cell just created. How can I do it? Can anyone guide me in doing it?
Here's my code to insertcells:
<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>
</body>
</html>
All I want is to insert image in the cell created.
You can create the image element and append it to the new cell:
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="New cell";
var img = document.createElement('img');
img.src = "link to image here";
x.appendChild(img);
}
Beware of building the raw HTML for the image, if you do it that way you'll need to make sure that you escape the src and any other attributes.
Simply set the inner HTML of the new cell to the HTML of an img element, with whatever src or attributes you wish.
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(-1);
x.innerHTML="<img src='myImageURL' alt='hello'/>";
}
function displayResult()
{
document.getElementById("myTable").rows[0].innerHTML="your image";
}
may be this can help,dynamicism can be achieved later on,just try if it works for now?

Print html through JavaScript / jQuery

I wish to print a document by passing custom html code.
The non-working code I have written :
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=780, height=780, left=100, top=25";
var content_vlue = document.getElementById("result_tbl").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>');
docprint.document.write('</head><body onLoad="self.print()"><center>');
docprint.document.write('<TABLE width="100%" cellpadding=10 align=center valign="top"><TR valign="top"><TD width = "33%" valign="top">col1</TD><TD width = "33%" valign="top">col2</TD><TD width = "33%" valign="top">col3</TD></TR></TABLE>');
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
docprint.close();
}
This is the method I called on href of an anchor tag, but the not getting the work done:
<a href="javascript:Clickheretoprint()">
I am a beginner to JavaScript/jQuery coding.
You are on the right track. Assuming result_tbl is the ID of element you like to print as-is, first wrap the element with a <div> tag e.g.:
<div>
<table id="result_tbl">
.....
</table>
</div>
Then have such code:
var docprint=window.open("about:blank", "_blank", disp_setting);
var oTable = document.getElementById("result_tbl");
docprint.document.open();
docprint.document.write('<html><head><title>Ashley Mattresses</title>');
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.parentNode.innerHTML);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.print();
docprint.close();
Live test case.
Working fine for me under Chrome 18:
Checkout: http://jsfiddle.net/5Wfqr/3/
For me only source of trouble is:
var content_vlue = document.getElementById("result_tbl").innerHTML;
Do you have element with ID : "result_tbl" within your HTML?
This code works fine for me
<body>
<script type="text/javascript">
function printPage() {
var docprint = window.open("about:blank", "_blank"`enter code here`, "channelmode");
var oTable = document.getElementById("tbl");
docprint.document.open();
docprint.document.write('<html><head><title>your title</title>');
docprint.document.write('</head><body><center>');
docprint.document.write(oTable.innerHTML);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.print();
docprint.close();
}
</script>
<table id="tbl">
<tr>
<td> content1 </td>
<td> content2 </td>
</tr>
</table>
<input type="button" value ="print" id="printButton" onclick="javascript:printPage()"/>
</body>

Can't make JavaScript work, is it an ID issue?

I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info" > <img src="homeicon.png" /> </a>
<br>
<br>
<br>
<br>
<br>
<div id="appTable" style="float: left">
<table border="0" id="appTable">
<tr>
<td>life calculator</td>
</tr>
<tr>
<td>punny!</td>
</tr>
<tr>
<td>drink roulette (on its way!)</td>
</tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="0">
<tr>
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
</tr>
<tr>
<td id="punnyButton"><img src="arrow1.png" width="45"/></td>
</tr>
<tr>
<td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
</tr>
</table>
</div style="clear: both">
<div id="content">
my apps :)
</div>
And here's the JavaScript:
var foo = document.getElementById('lifeCalculatorButton');
foo.onClick = function (){
document.getElementById('content').innerHTML = 'foo';
};
Try changing the onclick event to all lowercase.
var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
EDIT
The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<title>my apps</title>
</head>
<body>
<div id="breaks">
<img src="homeicon.png" />
<br /><br /><br /><br /><br />
<div id="appTable" style="float: left">
<table border="1" id="appTable">
<tr><td>life calculator</td></tr>
<tr><td>punny!</td></tr>
<tr><td>drink roulette (on its way!)</td></tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="1">
<tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
</table>
</div>
<div id="content">
my apps :)
</div>
</body>
</html>
<script type="text/javascript">
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
</script>
EDIT
If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.
window.onload = function () {
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
};
First, you seem to have a typo here:
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
The <img> tag is not closed properly.
You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:
window.onload = function () {
var foo = document.getElementById("lifeCalculatorButton");
// ...
};
It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.
If you don't want to use jQuery your javascript looks ok as this fiddle works.
As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var foo = document.getElementById('Clickable');
foo.onclick = function (){
alert("See It Works");
};
}//]]>
On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.
Does it need to be the td that holds the id? Why not use an a tag to wrap around the image (and as suggested close the img tag correctly with />). Apply the onclick to the a tag and call a function with a return false afterwords to bypass normal behavior... and obviously, in your onclick you can call whatever function u want

Delete the entire table rendered from different pages using Javascript

I am having a table like:
<table id="toc" class="toc" border="1" summary="Contents">
</table>
in many pages .. All these pages are rendered in a single page.
when I apply the Javascript to delete that using on load. Only one table is deleted and not the others.
I am trying to delete the tables in all the rendering pages using Javascript. How to do this?
Edit :
I myself found the solution
<script type='text/javascript'>
window.onLoad = load();
function load(){var tbl = document.getElementById('toc');
if(tbl) tbl.parentNode.removeChild(tbl);}
</script>
Here's a rough sample
<html>
<head>
<script type="text/javascript">
function removeTable(id)
{
var tbl = document.getElementById(id);
if(tbl) tbl.parentNode.removeChild(tbl);
}
</script>
</head>
<body>
<table id="toc" class="toc" border="1" summary="Contents">
<tr><td>This table is going</td></tr>
</table>
<input type="button" onclick="removeTable('toc');" value="Remove!" />
</body>
</html>
Really want to delete the table altogether?
var elem = documenet.getElementById('toc');
if (typeof elem != 'undefined')
{
elem.parentNode.removeChild(elem);
}
You could also hide the table rather than deleting it.
var elem = documenet.getElementById('toc');
elem.style.display = 'none';
If you need it later, you could simply do:
var elem = documenet.getElementById('toc');
elem.style.display = 'block';
<script type="text/javascript">
function deleteTable(){
document.getElementById('div_table').innerHTML="TABLE DELETED"
}
</script>
<div id="div_table">
<table id="toc" class="toc" border="1" summary="Contents">
</table>
</div>
<input type="button" onClick="deleteTable()">
var tbl = document.getElementById(id);
tbl.remove();

call function with dijit.layout.ContentPane onload?

Is it call test() of sub.htm from index.htm by this code when doing very?
Thank you very much.
index.htm
<div dojoType="dijit.layout.ContentPane" id="subFrame" region="left" href="sub.htm">
<script type="dojo/connect" event="onLoad">
// this call test()
</script>
</div>
sub.htm
<script type="text/javascript">
function test() {
alert("success");
}
</script>
<table>
<tr>
<td></td>
</tr>
</table>
For what I know you can't call a javascript inside a content pane unless you use <script type="dojo/method">. try to replace the text/javascript type in sub htm with "dojo/method".
i think it should be fine if you swap the function into a variable declaration style:
var test = new function(){ alert("success") };

Categories

Resources