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.

How to pass iterator list in Struts 2 to JavaScript?

<fieldset class="fieldset">
<legend class="legendtitle">DEDUCTIONS</legend>
<table width="100%" border="0" cellspacing= "0" cellpadding="0">
<tr>
<td class="Htd_one1" width="20%"><div align="center">Component</div></td>
<td class="Htd_one1" width="20%"><div align="center">Allocated</div></td>
</tr>
<s:iterator value="%{#resultLists.deductionLists}" id="hrEmpSalaryCompDeductionList"
status="stat">
<s:if test="%{#allowanceList.allocatedSalAmount > 0}">
<tr>
<td class="labelone1" >
<div align="center">
<s:property value="%{#allowanceList.componentDesc}" />
</div>
</td>
<td class="dataone1" >
<div align="right">
<s:property value="%{#allowanceList.allocatedSalAmount}" />
</div>
</td>
</tr>
</s:if>
</s:iterator>
</table>
</fieldset>
I need to hide the whole fieldset if none of the value of allowanceList.allocatedSalAmount in iterator list resultLists.deductionLists is not greater than 0.
I thought of calling JavaScript and to pass the value of resultLists.deductionLists and then set a counter if any allowanceList.allocatedSalAmount being greater than 0.
But how can I pass the list value of resultLists.deductionLists to JavaScript and access all allowanceList.allocatedSalAmount out of it?

To hide whole fieldset you have to wrap it with <s:if> tag.
<s:if test="%{#allowanceList.allocatedSalAmount > 0}">
<fieldset class="fieldset">
<legend class="legendtitle">DEDUCTIONS</legend>
<table width="100%" border="0" cellspacing= "0" cellpadding="0">
<tr>
<td class="Htd_one1" width="20%"><div align="center">Component</div></td>
<td class="Htd_one1" width="20%"><div align="center">Allocated</div></td>
</tr>
<s:iterator value="%{#resultLists.deductionLists}" id="hrEmpSalaryCompDeductionList"
status="stat">
<tr>
<td class="labelone1" >
<div align="center">
<s:property value="%{#allowanceList.componentDesc}" />
</div>
</td>
<td class="dataone1" >
<div align="right">
<s:property value="%{#allowanceList.allocatedSalAmount}" />
</div>
</td>
</tr>
</s:iterator>
</table>
</fieldset>
</s:if>
because you can iterate only one list at a time in fieldset you can't have both lists iterated by the same iterator. You have to define the proper expression to evaluate in the <s:if> tag to decide whether you should display fieldset or not.

How do I iterate through table rows with specific img alt attribute and delete cells in javascript

Have an html table as follows (# of rows vary)..
<table id="issuetable">
<tbody>
<tr id="issuerow13210" rel="13210" data-issuekey="Ticket-215" class="issuerow focused">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215" tabindex="-1" title="Ticket-215"></a> <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="IT Help" title="IT Help - For general IT problems and questions."></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215">Ticket-215</a>
</td>
<a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"></a>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13210" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13210/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
<tr id="issuerow13209" rel="13209" data-issuekey="Ticket-214" class="issuerow">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214" tabindex="-1" title="Ticket-214"></a> <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="Task" title="Task"></a></td>
<td class="issuekey">
<a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214">Ticket-214</a>
</td>
<td class="issue_actions"> <div class="action-dropdown aui-dd-parent">
<a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13209" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13209/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
<span>
<em>Actions</em>
</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
How can I use javascript once the page finishes loading to iterate through each row and delete the cell "issue_actions" only if the row contains an image with alt="IT Help"?

My own suggestion would be:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
The use of .empty() removes the content of the <td> elements, but does not remove the <td> itself, which should prevent the table layout being distorted by rows with differing cell-counts.
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
The following uses remove(), which demonstrates the slight visual problem:
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove();
img[alt="IT Help"] {
box-shadow: 0 0 0 5px #f00;
}
td {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
<tr>
<td>
<img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
</td>
<td class="issue_actions">This should be visible</td>
</tr>
<tr>
<td>
<img src="http://placekitten.com/150/150/" alt="IT Help" />
</td>
<td class="issue_actions">This shouldn't be visible</td>
</tr>
</tbody>
</table>
References:
Attribute-equals ([attribute="value"]) selector.
closest().
empty().
siblings().

Use the pseudo selector :has and then, find your element you want to remove :
$('tr:has(img[alt="IT Help"]) .issue_actions').remove();

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

how to calculate values from one text box and set it to another textbox using jquery [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Unable to get textfield value using jQuery
i have a invoice where i am iterating values from a list. There i have textbox named subtotal , this textbox holds some number. And another textbox named discountamt ,in this textbox user will enter discount in number,which will be calated as discountamt percentage subtotal .i.e(discountamt % subtotal) eg. 10% of subtotal.
And the calculated amount should reduce from subtotal and should set in anther textbox named overalltotal .
Please see my below image which shows how my output should be...
Below is my code, where i am trying to implement this
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: b">
Sub Total. <s:textfield name="subtotal" value=" " size="5"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5">
Discount:<sj:textfield name="discountamt" size="1" placeholder=" %"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1%" valign="top" width="100%">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 10px;">
<td width="100%" align="right" colspan="5" style="font-weight: bolder;">
<s:set var="total" value="%{0}" />
Over All Total Amount: <s:textfield name="overalltotal size="4"></s:textfield>
</td>
</tr>
</table>
</td>
</tr>
UPDATE Correct Answer:
$('input[name="discountamt"]').keyup(function()
{
var disamount=$('[name=discountamt]').val();
var linetotal = $('[name=subtotal]').val();
var priceafterdisc=linetotal-(((disamount)/100)*linetotal);
$('[name=overalltotal]').val(priceafterdisc);
});
Please help me to solve this issue...

Try this:
Html:
<input name="box1" id="box1" type="text">
<input name="box2" id="box2" type="text">
jQuery:
$('#box2').val($('#box1').val());

try to change element name='whatever' with id='whatever'
eg: <s:textfield name="overalltotal" size="4"></s:textfield>
change to: <s:textfield id="overalltotal" size="4"></s:textfield>