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>
Related
Here is a code http://jsfiddle.net/uyDbL/ . Ultimately I want to load in different page one of this links as visible from start(different links must be visible in different pages). Now page doesn't load anything, just blank space. Thanks so much for help. I'm a beginner in javascript and programming too. Please for finished code.
<table border="0">
<tr>
<td>
<hr>
fea1<br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
If you give the link the class of active, this code will look for that class and set the preview content as that on load.
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
el = $("a.active");
if(el.length > 0){
$('.target').html($(el.attr("href")).html());
}
});
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td>
<hr>
<a class="active" href="#m1">fea1</a><br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
I have the following jsp
<div class="content" id="divContent">
<ul class="ul-content ui-sortable" id="content" style="padding-left: 10px; max-width: 920px;">
<li class="draggable freetext ui-draggable ui-draggable-handle content-element" style="width:; height:; overflow: auto;">
<div class="element-content">
<div class="questiontitle elementtitle" id="58f95b7f-c127-7e40-a3a7-5253ed32fc31">
<table>
<tbody>
<tr>
<td>
<span class="optional1">(Opcional )</span>
</td>
<td>New Freetext Question</td>
</tr>
</tbody>
</table>
</div>
<input class="freetext" type="text" readonly="readonly">
<div class="questionhelp">
</div>
</div>
</li>
</ul>
</div>
I want to find the table inside the div
<div class="questiontitle elementtitle" id="58f95b7f-c127-7e40-a3a7-5253ed32fc31">
I wrote the code:
var contentDivTable = $(contentDiv).find('tr');
var numerocontentDivTable = contentDivTable.length;
console.log('additem after addfreetext contenDiv number table ',numerocontentDivTable);
This is the trace in browser's console
additem after addfreetext contenDiv [object HTMLDivElement]
"additem after addfreetext contenDiv "
<div class="questiontitle elementtitle" id="146b750d-18e8-b8a5-a34d-082c9bd04e0d">New Freetext Question</div>
additem after addfreetext contenDiv number table 0
How can I get the element table?
If you want to select the table inside a div
Apply a css class on div like: <div class="content">
Then use $('.content table') to select table which is inside that div
If you want to check whether there is a table or not, you can do:
if($("#divContent").find('table').length) {
// table exists
} else {
// no table found
}
If divContent have single .questiontitle class div, then you can try as below
var tbl= $("#divContent .questiontitle").find('table');
// this will display full table html content
console.log(tbl.html());
Then if you want to loop over table row data try below code
$(tbl).find('tr').each(function(){
var currentRow=$(this);
var col1_value=currentRow.find("td:eq(0)").text();
var col2_value=currentRow.find("td:eq(1)").text();
});
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")
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.
I have the below code and it works but what is the right way to get table onclick of add
HTML
<div>
<h4 class="titlebar">
Skills
<small><a onclick="return false;" href="/add/" data-span="3">Add</a></small>
</h4>
<div class="body">
<table class="table">
<tbody>
<tr><td width="125"></td></tr>
</tbody>
</table>
</div>
</div>
JQuery
var TableBlock = $(this).closest('.titlebar').next().children('table');
this points to Add link
You didn't mention who is the parent of <div class="body"> and <h4 class="titlebar"> which is critical.
$(this).closest('table-parent(the missing parent)').find('table');
find is better than childern because it will work even if the table get nested in future development.
If you want only the first matched table:
.find('table').first();
//Or
.find('table:first');
Update:
Based on your question update, I would add to the parent div a class or an id:
<div class="parent" >
<h4 class="titlebar">
...
Then:
$(this).closest('div.parent').find('table');
If you can't change the DOM:
$(this).closest('h4.titlebar').parent().find('table');
Or:
$(this).closest('h4.titlebar').siblings('.body').find('table');