Insert image into table cell in Javascript - 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?

Related

Get .src in Javascript from PHP while

I have a folder with a couple of images. I´m using PHP to get the path of each image to show them in a HTML <table>. Now i´m trying to use the addEventListener to show the image in another div. I begin to show you my PHP:
<table id="imgTable">
<tr>
<?php
$handle = opendir(dirname(realpath(_FILE_)).'../up/to/my/folder');
while($file = readdir($handle)) {
if($file !== '.' && $file !== '..') {
echo '<tr><img src="../up/to/my/folder/' .$file. '" alt="image" class="imgClass"></td>';
}
}
?>
</tr>
</table>
After that i want to use the addEventListener to get the URL from the clicked image and use the src to display the image in another div. Like a photo-gallary.
Thats what I have in JS:
<script type="text/javascript">
document.getElementsByTagName('img').addEventListener("click", function(){
document.getElementById('imgViewer').style.visibility= "visible";
var img = document.getElemensByClassName('imgClass');
for(i=0; i<img.length; i++) {
document.getElementById('bigImg')src = img[i].src;
}
}
</script>
After that, I use to show the image in a with CSS hidden div:
<div id="imgViewer">
<img src="../up/to/my/folder/imgholder.png" id="bigImg">
</div>
I dont want to use onClick. But there comes no reaction with addEventListener and I don´t understand why. It´s my first year in the University and I had just begun to write JavaScript. Maybe there is somebody to help me.
ID should be unique in both HTML4 and HTML5.
http://www.w3.org/TR/html4/struct/global.html
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
http://www.w3.org/TR/html5/dom.html#the-id-attribute
The id attribute specifies its element's unique identifier (ID). [DOM]
You can modify your PHP and JavaScript code as following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OnClick</title>
</head>
<body>
<table id="imgTable">
<tr><?php
$handle = opendir(dirname(realpath(_FILE_)).'../up/to/my/folder');
$imgID = 0;
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo ' <td><img src="../up/to/my/folder/' .$file. '" alt="image" class="imgClass" id="imageId_'.$imgID.'"></td>\n';
$imgID++;
}
}
?></tr>
</table>
<div id="imgViewer">
<img src="../up/to/my/folder/imgholder.png" id="bigImg">
</div>
<script type="text/javascript">
// create array of all images inside "imgTable"
var imglist = document.getElementById("imgTable").getElementsByTagName("img");
// loop to create onclick event for each image
for(i=0; i<imglist.length; i++) {
document.getElementById(imglist[i].id).addEventListener("click", function(){
document.getElementById('bigImg').src = this.src;
});
}
</script>
</body>
</html>
code is tested and working...
You can run following snippet for demo (I replace images and manually add html code instead of php part)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>OnClick</title>
</head>
<body>
<table id="imgTable">
<tr>
<td><img src="http://i.imgur.com/99ACX4d.jpg" alt="image" class="imgClass" id="imageId_1"></td>
<td><img src="http://i.imgur.com/lXVuaa3.jpg" alt="image" class="imgClass" id="imageId_2"></td>
</tr>
</table>
<div id="imgViewer">
<img src="http://i.imgur.com/QsYVnSd.png" id="bigImg">
</div>
<script type="text/javascript">
// create array of all images inside "imgTable"
var imglist = document.getElementById("imgTable").getElementsByTagName("img");
// loop to create onclick event for each image
for(i=0; i<imglist.length; i++) {
document.getElementById(imglist[i].id).addEventListener("click", function(){
document.getElementById('bigImg').src = this.src;
});
}
</script>
</body>
</html>
Also format your code and use some code editor with autocomplete and debugger. You have many small mistakes (e.g. <tr> instead of <td> in php echo, you forgot dot (.) before src in JS, there is no t in getElementsByClassName).
replace this line
document.getElementById('bigImg')src = img[i].src;
with
document.getElementById('bigImg').src = img[i].src;
you forgot . berfore src
and try this for click event
document.getElementsByTagName('img').addEventListener("click", function() {}
seems like your all images has same id so it will not apply on all images, id have to be unique
you can also do this in jquery for click
$('.imgClass').click(function(){
});
first give a same class name to all images(for example class name is test) and then
write below code
$('.test').on('click',function(){
var src = $(this).attr('src');
// here place your rest of the code
});

Print only certain part of the <div> content

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

How to print a HTML Data which is in a String

I have a Print button in my Project. I am using JavaScript to print the data. I have a variable as data_to_print which contains the HTML which is to be print. The problem is that when i hit the print button the print dialog window of windows does not open. I am not able to find whats the problem, can any one help me.
Below is my Code:
function print_all()
{
var xx='<html>
<head>
<style>...</style>
</head>
<body>
<center>
<div>
<table><thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Address</th>
<th>DOB</th>
</tr><thead>
<tr>
<td>1</td>
<td>John</td>
<td>Mumbai</td>
<td>15 August</td>
</tr>
<tr>
<td>2</td>
<td>John2</td>
<td>Mumbai2</td>
<td>18 August</td>
</tr>
</table>
</div>
</center>
</body>
<html>';
var content_vlue = xx;
content_vlue=content_vlue.replace("[Print]", "");
var docprint=window.open("","","");
docprint.document.open();
docprint.document.write('<html><head>');
docprint.document.write('<style> .table{border-collapse:collapse;}.table tr
th{border:1px solid #000!important;color:#000;}.table tr th
a{color:#000!important;}.table tr td{border:1px solid #000!important;}</style>');
docprint.document.write('</head><body><center>');
docprint.document.write('<div align="left">');
docprint.document.write(content_vlue);
docprint.document.write('</div>');
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
The reason for your trouble is quit simple. You forgot to add the method .print();.
When I understand your right, then do following:
function print_all()
{
...
docprint.document.close();
docprint.focus();
//This line was missing
doc.print();
}
Addationaly two advices:
First:
As steo wrote, if you want to print long string in Javascript, concatinate it with the plus sign. The browsers don't accept line breaks within strings.
Second:
When I used your definition for the link <a title="Print" onClick="print_all();" class="no-bord btnlite" target="_blank">print</a> it did open the opener page also in a new tab. Another effect ourccur when I opend the site in IE. The effect: he didn't marked this line as clickable link.
To solve these, use this line <a title="Print" href="#" onClick="print_all();return false;" class="no-bord btnlite" target="_blank">print</a> .

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>

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();

Categories

Resources