When I try to display HTML code of a DIV element, innerHTML does not return its contents:
<div id="container">
<tr>
<td style="background-color: #ffffff;">TEST</td>
</tr>
</div>
var w = window.open();
w.document.write(data);
w.document.getElementById("prw").value = w.document.getElementById("container").innerHTML;
w.document.close();
prw is an input element. innerHTML only returns TEST. Is there a way to copy HTML contents of a DIV without specifying TABLE element?
replace
<div id="container">
<tr>
<td style="background-color: #ffffff;">TEST</td>
</tr>
</div>
with
<div id="container">
<table>
<tr>
<td style="background-color: #ffffff;">TEST</td>
</tr>
</table>
</div>
and this will work fine.
If I understood correctly what you want to do, you should use OuterHTML instead of InnerHTML.
Related
I would like to load all table elements from my index.html which have the specified class assigned in a variable. Unfortunately the first line of HTML doesn't load correctly.
My HTML (example for one table, usually there a few of them):
<!-- More HTML stuff -->
<table class="class_TopTable table" id="id_TopTable">
<tr>
<td>
<button id="id_Remove">Remove 1</button>
</td>
<td>
<div id="id_Title"><B>Title 1</B></div>
<div id="id_Content">Content 1</div>
</td>
</tr>
</table>
<!-- More HTML stuff -->
My Javascript:
var all_class_TopTable = "";
$('.class_TopTable').each(function(){
all_class_TopTable += $(this).html();
})
After this JS is run, the variable of all_class_TopTable containts following HTML:
<tbody>
<tr>
<td>
<button id="id_Remove">Remove 1</button>
</td>
<td>
<div id="id_Title"><B>Title 1</B></div>
<div id="id_Content">Content 1</div>
</td>
</tr>
</tbody>
Where the first line is different as my real html.
I expect in the beginning <table class="class_TopTable table" id="id_TopTable"> and in the end </table>.
But the result is in the beginning <tbody> and in the end </tbody>.
What do I wrong?
You are getting the inner HTML of the table node(s), which excludes the table node(s) itself.
You could wrap all the content in a div and then get its html:
var all_class_TopTable = $('<div>').append($('.class_TopTable').clone()).html();
You could use the outerHTML property to capture the element itself along with its descendants.
all_class_TopTable += $(this)[0].outerHTML;
As the html method only captures its descendants, it wraps it with tbody.
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I'm trying to use a script to change the visibility of a div if an image inside it is missing
here is the div:
<div id="bike01">
<a href="stock/bike1.html">
<table width="900" border="0" cellpadding="3" cellspacing="0" class="table">
<tr>
<td width="245" rowspan="2"><img id="bike1" src="stock/bike1/images/image1.jpg" name="bike1" width="245" height="184" />
</td>
<td width="468"><div id="title1"></div></td>
</tr>
<tr>
<td colspan="2"><div id="desc1"></div></td>
</tr>
</table>
</a>
</div>
and here is my script (I am a complete beginner when it comes to scripting - ive just picked this up from researching my question)
<script>
$("#bike1").error(function () {
$("#bike01").css({visibility:"hidden"});
});
</script>
Basically if the img#bike1 is missing i want the whole div #bike01 to disappear.
Why not do:
<img id="bike1" src="stock/bike1/images/image1.jpg" onerror="this.style.display='none';" />
How do I hide broken images in javascript?
<img id="bike1" src="stock/bike1/images/image1.jpg" onerror='$("#bike01").css({visibility:"hidden"});' />
Try this:
<script>
$("#bike1").on('error', function() {
$("#bike01").hide();
});
</script>
Jquery noob, so don't kick too hard plz.
Got the product grid with table in product description. Table td's have the same class, and when i try to pull the content from each of them and insert into a different place, i still get the same content, where it varies in each product.
here is html
<div class="product">
<div class="product777">
<table>
<tr><td class="varimage1">content 1</td><td class="varimage2">COntent2</td></tr>
</table>
<div class="galitem1"></div>
<div class="galitem2"></div>
</div></div>
here is the piece of js code
$(".product").each(function(){
// tried this
var colorimgab = $(".varimage2").html();
//and tried this
var colorimgaa = $(this).closest(".product777").find(".varimage1").html();
$(".galitem1").html(colorimgaa);
$(".galitem2").html(colorimgab);
});
I think this could help you:
$(".product").each(function(){
var colorimgab = $(this).find(".varimage1").html();
var colorimgaa = $(this).find(".varimage2").html();
$(this).find(".galitem1").html(colorimgab);
$(this).find(".galitem2").html(colorimgaa);
});
td{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="product">
<div class="product777">
<table>
<tr>
<td class="varimage1">content 1</td>
<td class="varimage2">COntent2</td></tr>
</table>
<div class="galitem1"></div>
<div class="galitem2"></div>
</div>
</div>
I have a div in the following format.
1. How Can I add this to an existing div. Do I create a seperate html file and then add it using jquery? or Should I append this into a var and then append it to the div. Pls suggest a way to 1 append and create the div and then append it within another div(whose id i know)
<div>
<table>
<tr><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td><td></td>
</tr>
<tr><td></td><td></td><td></td><td></td>
</tr>
</table>
<table>
<tr><td></td>
</tr>
</table>
</div>
You can try something like this (using jQuery):
HTML:
<div id="content" style="display: none;">
<div>
<table>
<tr>text here and then some input tag
</tr>
</table>
<table>
<tr>text here and then some input tag
</tr>
<tr>text here and then some input tag
</tr>
</table>
<table>
<tr>text here and then some input tag
</tr>
</table>
</div>
</div>
<div id="receiver1" style="background: #FF0000;"></div>
<div id="receiver2" style="background: #00FF00;"></div>
<div id="receiver3" style="background: #0000FF;"></div>
JS:
$(function(){
var theContent = $( "#content" ).html();
$( "#receiver1" ).html( theContent );
$( "#receiver2" ).html( theContent );
$( "#receiver3" ).html( theContent );
});
You can view the example here: http://jsfiddle.net/3hm6N/1/
Of course, you can use the approach that Greg Pettit said. Another thing, I didn't saw it, but your table is missformated since the tags should have <td>s or <th>s inside.