Develop Reference

getElementsByClassName is not working whereas ID is working. Why?

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.

pass values to javascript function onclick

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');
}

Get text from <tr> and add to img alt in another <tr>

I want to copy text from a blogger blogspot caption table and add it to the img alt, so that it will appear in the fancybox slideshow as the title/caption.
So, this is the HTML I have :
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr> <td style="text-align: center;"><img align="right" alt="" src="URL" title="Ghostly Waves in the Valle de Rocas" width="320" /></td> </tr>
<tr> <td class="tr-caption" style="text-align: center;">This is my Caption</td> </tr>
</tbody></table>
And my script is:
$("tr-caption").each(function(){
var Caption = $(this).text();
if (Caption && Caption !== ''){
$(this).parent(img).attr('alt', Caption );
}
});
And this is the output I'd hope for....
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr> <td style="text-align: center;"><img align="right" alt="This is my Caption" src="URL" title="Ghostly Waves in the Valle de Rocas" width="320" /></td> </tr>
<tr> <td class="tr-caption" style="text-align: center;">This is my Caption</td> </tr>
</tbody></table>
But it's not working...
Here's a jsfiddle: http://jsfiddle.net/NCqW2/6/
Any help greatly appreciated! Thanks for taking some time to look!

Replacing
$(this).parent(img).attr('alt', Caption );
with
$(this).parent().prev().find('img').attr('alt', Caption );
should do it.

How to get a image path inside a html table cell

I have a html table and I want to get all the content, I am having problems getting the img link in the fourth column.
This is the table
<table class="imagetable" border="1" id="tabla_ventana" style="display: table; overflow: auto;">
<tbody>
<tr>
<th>TFs Name</th>
<th>Accesion</th>
<th>DB</th>
<th>Logo</th>
<th>Delete TF</th>
</tr>
<tr>
<td>ABF1</td>
<td>M00015</td>
<td>Transfac</td>
<td>
<img src="MatrixLogos/MAT0006.png" width="150" height="30">
</td>
<td>
<img class="delete" src="images/Delete.png" style="cursor: pointer;">
</td>
</tr>
<tr>
<td>ABF1</td>
<td>M00197</td>
<td>Transfac</td>
<td>
<img src="MatrixLogos/MAT0007.png" width="150" height="30">
</td>
<td>
<img class="delete" src="images/Delete.png" style="cursor: pointer;">
</td>
</tr>
</tbody>
</table>
This is my JS, I define a variable so when I come to the image column I get this, because the text property doesn't work, but value and innerHTML either.
var cellIndexMapping = {
3: true
};
$("#tabla_ventana tr").each(function (rowIndex) {
$(this).find("td").each(function (cellIndex) {
if (cellIndexMapping[cellIndex]) {
alert($(this).val()); //What i should put here
} else {
alert($(this).text());
}
});
});

You want...
$(this).find('img').attr('src')

The magic line of code you need is $(this).find('img').attr('src')

You can add attribute class in yours img like this
**
<img class="imagen" src="MatrixLogos/MAT0006.png" width="150" height="30">
**
and in javascript with this code that should work "
**
$("#tabla_ventana img.imagen").each(function (){
alert($(this).attr('src'));
});
**
"

deleteRow sometimes deletes the right row and sometimes not in Javascript

I have a table. At the end of each row tehere is a href "X" which deletes this row. This is pretty simple. Now when you click "X" for any row 2 it deletes row 2, but then when you click on row 3 it deleted row 4.
This is my code:
HTML
<table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>Custom0</td>
<td><a title="my title text" id="1" href="#" class="someclass" onclick="deleteRows(0)">X</a>
</td>
</tr>
<tr>
<td>Custom1</td>
<td> <a title="my title text" id="2" href="#" class="someclass" onclick="deleteRows(1)">X</a>
</td>
</tr>
<tr>
<td>Custom2</td>
<td> <a title="my title text" id="3" href="#" class="someclass" onclick="deleteRows(2)">X</a>
</td>
</tr>
<tr>
<td>Custom3</td>
<td> <a title="my title text" id="4" href="#" class="someclass" onclick="deleteRows(3)">X</a>
</td>
</tr>
<tr>
<td>Custom4</td>
<td> <a title="my title text" id="5" href="#" class="someclass" onclick="deleteRows(4)">X</a>
</td>
</tr>
<tr>
<td>Custom5</td>
<td> <a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(5)">X</a>
</td>
</tr>
</table>
and Javascript
function deleteRows(row) {
var tbl = document.getElementById('my_table'); // table reference
tbl.deleteRow(row);
}
You can play wit it here: http://jsfiddle.net/nTJtv/13/

You have hard-coded the row numbers, so after the first deletion they are out of sync. The <table> element's .rows property is "live", so removing one means the numbers no longer line up with your HTML.
Instead, consider passing this.parentNode.parentNode to the function and using it to determine which row to delete:
<a title="my title text" id="6" href="#" class="someclass" onclick="deleteRows(this.parentNode.parentNode)">X</a>
Then use removeChild() in the function:
function deleteRows(row) {
var tbl = document.getElementById('my_table'); // table reference
tbl.getElementsByTagName("tbody")[0].removeChild(row);
}
Edit: The <tr> is a child of the <tbody> element, so that must be the parent from which it is removed.
http://jsfiddle.net/nTJtv/19/
If you would really rather do it with deleteRow(), then loop through the rows to find the one passed to the function and delete it:
function deleteRows(row) {
var tbl = document.getElementById('my_table'); // table reference
// Loop over the table .rows collection to find the one passed into the function
for (var i=0; i<tbl.rows.length; i++) {
if (row == tbl.rows[i]) {
// And delete it
tbl.deleteRow(i);
return;
}
}
}
http://jsfiddle.net/nTJtv/21/

Why not do something like this? Using jQuery isn't hard to add into existing files/sites.
HTML:
<table id="my_table" cellspacing="0" cellpadding="0">
<tr>
<td>Custom0</td>
<td><span title="my title text" id="1" class="someclass">X</span></td>
</tr>
<tr>
<td>Custom1</td>
<td><span title="my title text" id="2" class="someclass">X</span></td>
</tr>
</table>
JavaScript:
$('.someclass').on('click', function() {
$(this).parent().parent().remove();
});