Develop Reference

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

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();

Replacing image inside a table cell doesn’t work

I have a table in which rows are added dynamically using jQuery (latest row on top using prepend). If it is an errorLine, text in the first column will be “x”. If it is a successLine the text in the first column will be numerals like 1,2,3…
If the latest row is an errorLine, I need to apply background color (using class “firstErrorLine”) and replace the text “x” with an image. At the same time I need to remove image from all other lines and replace image with text “x”. I tried multiple jQuery approaches but didn’t work. Following is one of the failed approaches.
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
Any thoughts how we can achieve this?
Demo – jsFiddle
jQuery Code
$(document).ready(function ()
{
function styleFirstErrorLine(isFailureExist)
{
$("#tblVisualAidResult tbody tr").removeClass('firstErrorLine');
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
if(isFailureExist)
{
$("#tblVisualAidResult tbody tr:first").addClass('firstErrorLine');
var firstCell = $("#tblVisualAidResult tbody tr:first td:first");
$(firstCell).html('<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"/>');
}
}
styleFirstErrorLine(true);
});
HTML
<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0"
style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
<thead>
<tr>
<td class="Heading3" style="width: 20%;">
Serial No
</td>
<td class="Heading3" style="width: 30%;">
Container ID
</td>
<td class="Heading3">
Status
</td>
</tr>
</thead>
<tbody>
<tr class="Normal">
<td style="padding-left: 5px">
x</td>
<td>
TEST4
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
2
</td>
<td>
182145011
</td>
<td>
Received 2 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test3
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test2
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
1
</td>
<td>
182145029
</td>
<td>
Received 1 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test1
</td>
<td>
Case Label does not Exist
</td>
</tr>
</tbody>
</table>

If I understand correctly what you are trying to achieve, you should use td:first-child instead of td:first.
jsFiddle demo

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

JQuery FadeOut function not occurring on the first attempt

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 () {