I'm animating table rows to slide up when deleting them, with jquery, which is cool in FF, Safari and Chrome. But surprise, suprise...!! It doesn't work in IE8. The worst thing is that IE8 doesn't show any error, so how am I supposed to debug.
Also I know tables are problematic when it comes to effects. That's why I replaced tr with a div using replaceWith().
Here's my jquery:
$('.remove').live('click', removeRowSlider);
function removeRowSlider(e){
var thisElem = $(this);
if( thisElem.hasClass('remove') ){
var tr = thisElem.closest('tr').parents('tr'),
supportDiv = $('<div style="height: 30px; width: 470px">').css({'height': tr.height()});
tr.animate({'opacity': 0.2}, function(){
tr.replaceWith(supportDiv);
supportDiv.slideUp(400, function(){
$(this).remove();
});
});
}
e.preventDefault();
}
HTML:
<table>
<thead>
<tr>
<th class="first-td">Item(s)</th>
<th class="qty-col">Qty</th>
<th class="price-col">Price</th>
<th class="price-col">Subtotal</th>
<th class="del-opt">Delivery options</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td class="first-td">
<img src="../assets/product-image.jpg" alt="product image" />
<div class="prod-desc-col">
<h3>Samsung LE40C580J1 LCD HD 1080p </h3>
</div>
</td>
<td class="qty-col">
<input type="text" value="1" />
Update
Remove
</td>
<td class="price-col">£12223.00</td>
<td class="price-col">£12223.00</td>
</tr>
</table>
</td>
<td>
<ul class="font-small">
<li class="coll-store">
<p>Collect from store</p>
</li>
<li class="uk-del">
<p>Delivery to UK</p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
Thanks for your help...
When it comes to IE, nothing surprises me!
I don't know if this works with your example, but sometimes I've had problems appending elements without an end-tag. So you could try this:
supportDiv = $('<div style="height: 30px; width: 470px;"></div>')...
Hope it works out for you!
Related
I would like to know how can i refresh my without refresh the entire page in Javascript
Exemple of HTML
<table class="list" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td class="checkbox edit"></td>
<td class="Element sortable" onclick="My.Game.List.sort(223, 'eleemnt');">Element</td>
<td class="ew sortable" onclick="My.Game.List.sort(223, 'ew');">Pop.</td>
<td class="distance sortable" onclick="My.Game.RaidList.sort(223, 'distance');">Distance</td>
<td class="element sortable" onclick="My.Game.List.sort(223, 'element');">Option</td>
<td class="last sortable" onclick="My.Game.List.sort(223, 'last');">Last</td>
<td class="action"></td>
</tr>
</thead>
<tbody>
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
</tbody>
</table>
Basicly i would like to refresh the content of all the row of my Table
I tried this but it seems not working i don't understand why :
JAVASCRIPT CODE :
setInterval(function() {
document.getElementsByTagName('table')[0].reload();
}, 500);
NB : The function is just a timer to refresh the table each 500 ms.
What is excepted to change :
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
Best regards !
There are a lot of answers to your question.
You could simply fix this by replacing the (inner)HTML of the element any time an update takes place.
Something like HTML : draw table using innerHTML
Messy, but it is the answer to your question.
Your HTML is not dynamicly updating values, that would be done trough javascript. If you are getting your values from a webservice - look into AJAX.
I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.
You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
Thank you so much for your help!
You may add to your css the following rule:
#options tr {
display: inline-table;
}
If you want to achieve the same result with jQuery you can write:
$('#options tr').css('display', 'inline-table');
Instead, if you need to move the sub table content to the upper table you can:
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
The snippet (css solution):
#options tr {
display: inline-table;
}
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight" >
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
The snippet (jQuery solution):
$('#options tr td').each(function(i, e) {
$(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00">
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>
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();
I have an html table inside a div, and i want to run jquery on each li element or the li class
and alert his id.
this is the html code.
this is the html code.
HTML:
<div id="lightbox_tlbr" style="top: 273px; display: block;">
<div id="test">
<div class="header_div" id="first_header"></div>
<div class="header_div" id="second_header"></div>
<div class="header_div" id="third_header"></div>
<div class="header_div" id="fourth_header"></div>
</div>
<li class="announcement_tlbr" id="announcement7">
<table id="tg_toolbar7" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text07">
<th style="background-image:url(/srv/admin/img/announcement/general_message_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text17"></th>
<th colspan="2" style="background-color:green" class="title_style_toolbar" id="tg_text27"><a style="color:white;font-size:11px;">2014-03-27 10:36:25</a><br><a style="color:white;">Title - 6 test</a><a></a></th>
<td style="width:0px;background-color:green;" id="tg_text87"><input type="button" class="minimze" style="background-color:green;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze7"></td>
</tr>
<tr id="tg_text97">
<td colspan="2" class="tg_text" id="tg_text37"></td>
</tr>
<tr class="r2_toolbar" id="tg_text47">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text57"></td>
<td class="tg_toolbar-031e" id="tg_text67"></td>
<td class="tg_toolbar-031e" id="tg_text77"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button7"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox7"></td>
</tr>
</tbody>
</table>
</li>
<li class="announcement_tlbr" id="announcement5">
<table id="tg_toolbar5" class="tg_toolbar">
<tbody>
<tr style="background-color:#3E3E3E;" class="tg_text0" id="tg_text05">
<th style="background-image:url(/srv/admin/img/announcement/bug_icon.png);" rowspan="2" class="tg-031etoolbar" id="tg_text15"></th>
<th colspan="2" style="background-color:red" class="title_style_toolbar" id="tg_text25"><a style="color:white;font-size:11px;">0000-00-00 00:00:00</a><br><a style="color:white;">Title - 4 test</a><a></a></th>
<td style="width:0px;background-color:red;" id="tg_text85"><input type="button" class="minimze" style="background-color:red;background:url(/srv/admin/img/announcement/minimise_button.png);float:right;" id="minimze5"></td>
</tr>
<tr id="tg_text95">
<td colspan="2" class="tg_text" id="tg_text35"></td>
</tr>
<tr class="r2_toolbar" id="tg_text45">
<td class="tg_toolbar-031e" style="background-color:#3E3E3E;" id="tg_text55"></td>
<td class="tg_toolbar-031e" id="tg_text65"></td>
<td class="tg_toolbar-031e" id="tg_text75"><input type="button" value="Confirm" class="ajax_btn_right_toolbar" id="button5"><input type="checkbox" class="ajax_checkbox_toolbar" id="checkbox5"></td>
</tr>
</tbody>
</table>
</li>
<div align="left" class="footer">Please confirm you have read and acted upon this message</div>
</div>
i try:
jQuery.each(".announcement_tlbr", function(k,v){ alert(k); })
what is a good way to do this?
You should use this inside each to get the reference of current element.Try this:
jQuery.each(".announcement_tlbr", function(e){
alert($(this).attr('id'));//or this.id
});
$(document).ready(function() {
$(".announcement_tlbr").each(function(){
alert($(this).attr("id"))
});
});