I am using both getElementsByClassName and getElementById. The later one (ID) is working but Class is not working. I have multiple td so i want to use class instead of ID but it is not working. Where is the issue?
<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID" onmouseover="document.getElementById('viewa').src='images/edit.png';" onmouseout="document.getElementById('viewa').src='';"><img src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>
<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name" onmouseover="document.getElementsByClassName('viewb').src='images/edit.png';" onmouseout="document.getElementsByClassName('viewb').src='';"><img src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>
</table>
GetElementById returns a single element, since ID is unique. But class isn't, so GetElementsByClassName returns an array of elements.
So you have to use GetElementsByClassName("foo")[0] for example, to get the first element with the class foo.
And if you want to execute it on all elements with the class, you'll have to do a for loop.
If you are okay with using jquery, then you can check the answer below. But if you really want to use plain javascript, then you can try this code.
<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID"
onmouseover="onmouseoverevent(this)" onmouseout="onmouseoutevent(this)"><img
src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>
<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name"
onmouseover="onmouseoverevent(this)" onmouseout="onmouseoutevent(this)"><img
src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>
</table>
<script>
function onmouseoverevent(elem)
{
elem.getElementsByTagName('img')[0].src='images/edit.png';
}
function onmouseoutevent(elem)
{
elem.getElementsByTagName('img')[0].src='';
}
</script>
Injecting inline vanilla JavaScript into HTML attributes kind of beats the purpose of using a library (which you aren't using anyway). The sensible jQuery idiom would be something like this:
jQuery(function($){
$("table a")
.on("mouseover", function(){
$(this).find("img").attr("src", "http://placehold.it/15x15");
})
.on("mouseout", function(){
$(this).find("img").attr("src", "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>ID</td>
<td><span style="vertical-align:middle;">Id is</span>
<a class="fancybox fancybox.iframe" href="#" title="Book ID"><img src="" id="viewa" align="right" width="15px" height="15px" /></a></td>
</tr>
<tr>
<td>Book Name</td>
<td><span style="vertical-align:middle;">Name is </span>
<a class="fancybox fancybox.iframe" href="#" title="Book Name"><img src="" class="viewb" align="right" width="15px" height="15px" /></a></td>
</tr>
</table>
If you also get rid of inline CSS in favour of proper stylesheets code maintainability will certainly improve.
Related
I have a piece of HTML table which is returned by the server and it looks like following:
<tbody>
<tr role="row" class="odd even pointer">
<td class="" width="5%" tabindex="0">
<ul class="enlarge">
<li>
<img src="" width="60px" height="60px">
<span>
<img src="">
</span>
</li>
</ul>
</td>
<td class="sorting_1" width="75%" data-url="" data-title="Sai Baba Nag Champa Incense 250 Gram, New, Free Shipping" data-price="11.25" data-image="" data-itemid="251908749939"> </td>
<td class="sorting_1" style="text-align:left;" width="10%">
£ 11
</td>
</tr>
</tbody>
What I'm currently doing is injecting the entire HTML in my DOM right away... But instead of doing it like this:
var dbtb = $('#datatable-responsive', data).html();
console.log(dbtb);
$('#datatable-responsive').html(dbtb
I would like to first fetch all the TR's from the table, and then append them directly into the table itself in DOM, but through a for/foreach loop?
How could I achieve this?
Not sure what you are trying to achieve. My best guess is you are trying to copy those rows to another table. If that's the case it should be as simple as:
$('table tr').appendTo('#target');
assuming that <table id="target"> is the target one
I want to pass values of two different table's row values to the javascript function onclick on the tooltip data.
Please find the fiddle http://jsfiddle.net/0w9yo8x6/34/
Below is the sample code:
<table border="1">
<tr>
<td>
<span style="float:left;">Table1Title</span>
<span style="float:right">MyData</span>
</td>
</tr>
<tr>
<td>
<table width="200px">
<tr>
<td>Data1 <img class="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data2 <img class="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
<tr>
<td>Data3 <img class="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
</table></td></tr>
</table>
<table class="myTooltipTable">
<tr><td> <span id="test" >test</span></td></tr>
</table>
If you always want to just get the first row's Table1Title you could just access it in the method instead of passing it:
function test(data){
alert("test invoked with data: " + data);
// This gets the title of the first table's row Table1Title
var table1Title = $('img.one').first().attr('data-title');
}
I need to grab the value inside <span> of each <tobdy>. I know the html is not well-formed, because I didn't write it. That's how SharePoint renders it, and it is in fact bad html. But the question is how do i interate through each and grab the numeric values inside of brackets i.e 122, 87, and 13 using jQuery? Is this doable?
Here is a quick fiddle: http://jsfiddle.net/traFg/
<TBODY id=titl386-1_ groupString="%3B%23Completed%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (122) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23InProgress%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (87) </SPAN>
</TD>
</TR>
</TBODY>
<TBODY id=titl386-1_ groupString="%3B%23NotStarted%3B%23">
<TR id=group0>
<TD class=ms-gb colSpan=100 noWrap>
<A onclick="javascript:ExpCollGroup('386-1_', 'img_386-1_',event, false);return false;" href="javascript:">
<IMG id=img_386-1_ border=0 alt=expand src="/_layouts/images/plus.gif"> Status</A> : Completed
<SPAN> (13) </SPAN>
</TD>
</TR>
</TBODY>
like this
jQuery('tbody span').each(function()
{
alert(jQuery(this).text().match(/\d+/));
})
I would like to wrap a span tag around text (shown below) which exists already in my table.
Text to wrap in span tag:
Build Muscle and Train Harder<br> Boost Energy without the
Calories<br> Promote Nitric Oxide Production
My HTML:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>Build Muscle and Train Harder<br> Boost Energy without the Calories<br> Promote Nitric Oxide Production<br><br>
<table cellspacing="0" cellpadding="0" border="0" id="tttt">
<tbody>
<tr>
<td><b><font class="pricecolor colors_productprice"><span class="PageText_L483n"><h3><b style="font-size:13px"><span class="saleprice"><font class="text colors_text"><b><span class="PageText_L335n">Sale Price</span>: </b></font></span> <b class="prodPrOr">$34.05 </b></b></h3></span></font></b><br><a class="pricecolor colors_productprice" href="/ShoppingCart.asp?ProductCode=amino%2Dchewables"><b><span class="PageText_L655n"><img class="AddRight" src="/v/vspfiles/assets/images/addtocartsmall.gif"></span></b></a>
</td>
</tr>
</tbody>
</table>
<br><br>
<a onclick="window.open('/help_FreeShipping.asp', 'FreeShipping', 'scrollbars,status,resizable,width=300,height=300');" href="javascript:void(0);">
<img border="0" alt="" src="/v/vspfiles/templates/2007New/images/Icon_FreeShipping.gif" class="vCSS_img_icon_free_shipping"></a>
</td>
<td valign="top" align="right" id="v65-productdetail-action-wrapper" class="v65-productdetail-options">
<div id="contact">
<img src="/v/vspfiles/assets/images/osw0001_talk_button.jpg">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<ul></ul>
</td>
</tr>
</tbody>
</table>
You should add a class or id to the td you're trying to select to make it a lot simpler. E.g. if you made it:
<td class="myText">Build ... </td>
Now that you can easily select it (though if you can't add the class for some reason there are ways around that - it's just the simplest way to do it), imho.
$('.myText').html().replace($('.myText').html().match(/^.*/), '<span class="myClass">'+$('.myText').html().match(/^.*/)+'</span>');
I have a page which has an unordered list down one side, to switch between different containers with images inside to the right of the list.
The page in question is at the following URL with the JQuery code in the head tag:
http://dev.bathroomwarehouse.com/bathrooms.html
After clicking an item on the left as soon as the page has loaded (for example 'Burgundy') the images to the right (encapsulated by a div container) disappears without animation, despite the 'fadeOut' function in JQuery being used.
After the first change, the fadeOut function acts as expected, and the div to the right fades out, and the new div fades in.
Can anyone help figure out why this is happening?
The code in question is below:
JQuery
$(document).ready(function () {
$(".catList li").click(function() {
$(".catList li").removeClass('selectedRange');
$(this).addClass("selectedRange");
var clickedItem = $(this).index(".catList li");
$(".images div").stop().fadeOut('slow', function () {
$(".images div").removeClass("selectedImageGroup");
});
$(".images div:eq(" + clickedItem + ")").delay(750).fadeIn(function () {
$(".images div:eq(" + clickedItem + ")").addClass("selectedImageGroup");
});
});
});
HTML:
<div class="imageSelector">
<ul class="catList">
<li class="selectedRange"><h2>Ivory</h2>Modernist suite featuring with a touch of nostalgia…</li>
<li><h2>Burgundy</h2>Contemporary classic...</li>
<li><h2>Evergreen</h2>Minimalist with a unique shower feature...</li>
</ul>
<div class="vertLine"> </div>
<div class="images">
<div class="imageGroup selectedImageGroup">
<table class="imageGroupTable">
<tr>
<td colspan="3" class="imageGroupMainImage">
<img src="img/ImageBrowser/B1/Main.jpg" alt="" />
</td>
</tr>
<tr class="imageGroupSmallImages">
<td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td>
<td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td>
<td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td>
</tr>
</table>
</div>
<div class="imageGroup">
<table class="imageGroupTable">
<tr>
<td colspan="3" class="imageGroupMainImage">
<img src="img/ImageBrowser/B2/Main.jpg" alt="" />
</td>
</tr>
<tr class="imageGroupSmallImages">
<td><img src="img/ImageBrowser/B2/Img1.jpg" alt="" /></td>
<td><img src="img/ImageBrowser/B2/Img2.jpg" alt="" /></td>
<td><img src="img/ImageBrowser/B2/Img3.jpg" alt="" /></td>
</tr>
</table>
</div>
<div class="imageGroup">
<table class="imageGroupTable">
<tr>
<td colspan="3" class="imageGroupMainImage">
<img src="img/ImageBrowser/B1/Main.jpg" alt="" />
</td>
</tr>
<tr class="imageGroupSmallImages">
<td><img src="img/ImageBrowser/B1/Img1.jpg" alt="" /></td>
<td><img src="img/ImageBrowser/B1/Img2.jpg" alt="" /></td>
<td><img src="img/ImageBrowser/B1/Img3.jpg" alt="" /></td>
</tr>
</table>
</div>
</div>
</div>
It's because you have display: block!important; overriding display: none; on your container div. (I can't explain why it doesn't work, but that is the cause of the issue.) It works after clicking once because it sets the inline style to display:block;. If you remove the CSS line of display:none for the element, the fade works on the first as well.
Example breakage: not working, working
Add this line:
$('.images div:first').show();
right after
$(document).ready(function () {