I have a table, with repetitive tbody's exactly as shown below:
<tbody>
<tr>
<td class="icons_small" style="color:#fff; vertical-align:middle;"><!--Change color to white if their is attachment--><span class="task_attachment" title="View Attached Items">v</span></td>
<td><span class="active">Task Name</span><br /><span style="vertical-align:middle;" class="icons_small">U</span><span class="contact_name tiny">Contact/Customer</span></td>
<td style="text-align:center;" class="tiny"><span class="date_assigned" title="Date Assigned">13/12/2012</span><br /><div id="progressbar" value="50" title="Progress"></div></td>
<td style="vertical-align:middle;" class="icons_small"><span class="edit_task" title="Edit Task">E</span></td>
<td style="vertical-align:middle;" class="icons_small"><span class="flag_task" title="Flag Task as Important">f</span></td>
<td style="vertical-align:middle;" class="icons_small"><span class="set_reminder" title="Set Reminder">A</span></td>
<td class="tiny" style="color:#333;"><span class="delete_task" title="Delete Task">Delete</span></td>
</tr>
<tr class="attachment" >
<td class="icons_small" style="vertical-align:middle;"><span class="attchement_type" title="Attachment">A</span></td>
<td colspan="6" class="tiny attachment_details">SomeAttachment.pdf</td>
</tr>
</tbody>
Using jquery, within each tbody, I hide the second tr (class="attachment"). I want to show this tr, when I click on the above tr's first td, which contains span(class="task_attachment"). However, i'm running into an all or nothing situation, the code below give's me no result, but i think it is closer to what i'm looking for.
// Show attached files
<script>
$("tr.attachment").hide();
$("span.task_attachment").click(
function () {
$(this).closest("tr.attachment").show()
});
});
</script>
Anyone have any suggestion, or see anything wrong with this?
Try:
$(this).closest("tr").next().show();
Closest tests itself and up to the DOM tree. WHat you need is to select next element to the span's closest tr.
Related
I'm trying to append all the text in the td elements to the a element as the subject of the mailto link, but I can only get the first closest elements text. How do I make it so it retrieves the text from all the elements? If possible I would rather have the a link inside the tbody element instead of the tr wrapper.
HTML:
<tbody>
<tr class="row-2" role="row">
<td class="column-1" tabindex="0" style="">2238221D2</td>
<td class="column-2">HPINC</td>
<td class="column-3">N7P47AA</td>
<td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
<td class="column-5" style="display: none;">#4.2</td>
<td class="column-6" style="display: none;">16</td>
<td class="column-7" style="display: none;">30</td>
<td class="column-8" style="display: none;">52</td>
<a class="mailme" href="mailto:test#test.com?subject=Product request&body=">mailtolink</a>
</tr>
</tbody>
Script:
$('a.mailme').each(function() {
$(this).attr('href', $(this).attr('href') +
$(this).closest('a.mailme').prev('td').text());
});
Your code is almost right, just select all td-tags, get the text and join the resulting array:
$('a.mailme').each(function() {
$(this).attr('href', $(this).attr('href') +
$(this).closest('.row-2').children('td').slice(0,-1).map(function() {return $(this).html()}).get().join(','));
});
Working fiddle: https://jsfiddle.net/21873jcz/
EDIT My Solution will work if you fix your html code. a tags are not permitted within tr-tags. Only td or th elements are allowed. So please fix your html and it will work
I found a few problems but here is what you want:
https://jsfiddle.net/uqswr2k3/
var subject = "";
$(".row-2 td").each (function() {
subject = subject + '-' + $(this).html();
});
$(".mailme").attr('href', 'mailto:test#test.com?subject=' + subject + '&body=');
<table>
<tbody>
<tr class="row-2" role="row">
<td class="column-1" tabindex="0" style="">2238221D2</td>
<td class="column-2">HPINC</td>
<td class="column-3">N7P47AA</td>
<td class="column-4">HP USB 3.0 to Gigabit LAN Adapter</td>
<td class="column-5" style="display: none;">#4.2</td>
<td class="column-6" style="display: none;">16</td>
<td class="column-7" style="display: none;">30</td>
<td class="column-8" style="display: none;">52</td>
<a class="mailme" href="">mailtolink</a>
</tr>
</tbody>
</table>
Make sure the tbody has an outside table or it can cause issues with jQuery. You were setting the value of the subject to the current iteration and not collecting them all. I put a variable named subject to add each td cells' HTML content. I separated each value in the subject with a dash - to make it cleaner.
A small selector with .next() jquery method is driving me crazy.
The story is like that, I am using Bootstrap filter with jquery on table rows. When the filter executes, it changes the display style attribute to table-row, like this:
<tr class="activated" style="display: table-row;">
Now what all I want from Jquery is, select the next available TR, from the current TR, that has display = table-row.
I have tried with the following:
$(getSelectedRow()).next(":not(:hidden)") returns []
$(getSelectedRow()).next(":visible") returns[]
$(getSelectedRow()).next("tr[display==visible]") returns []
I want to use next because I want next first sibling.
Here is the HTML
<table class="table table-hover navigateable focused" id="bookmarkTable">
<thead>
<tr>
<th class="text-center">Bookmarks</th>
</tr>
</thead>
<tbody class="searchable" id="bookMarkResultGridView">
<tr class="activated" style="display: none;">
<td class="word-wrap" data-rowindex="0" data-tabid="0"
data-url="http://gitready.com/" style="cursor: pointer;">git
ready ยป learn git one commit at a time<br>
<small class=
"text-muted word-wrap">http://gitready.com/</small></td>
</tr>
<tr class="activated" style="display: none;">
<td class="word-wrap" data-rowindex="1" data-tabid="0"
data-url="http://inthecheesefactory.com/blog/android-design-support-library-codelab/en"
style="cursor: pointer;">Codelab for Android Design Support
Library used in I/O Rewind Bangkok session :: The Cheese
Factory<br>
<small class=
"text-muted word-wrap">http://inthecheesefactory.com/blog/android-design-support-library-codelab/en</small></td>
</tr>
<tr class="activated" style="display: none;">
<td class="word-wrap" data-rowindex="2" data-tabid="0"
data-url="https://github.com/rogerta/secrets-for-android"
style="cursor: pointer;">Store your all Password in Android
App<br>
<small class=
"text-muted word-wrap">https://github.com/rogerta/secrets-for-android</small></td>
</tr>
<tr class="activated" style="display: table-row;">
<td class="word-wrap" data-rowindex="3" data-tabid="0"
data-url="https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library"
style="cursor: pointer;">Google Play Style Tabs using TabLayout
| CodePath Android Cliffnotes<br>
<small class=
"text-muted word-wrap">https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#design-support-library</small></td>
</tr>
</tbody>
</table>
I'm not sure I understand your getSelectedRow() but if it can be swapped with some class selector (in this case i used .selected) and you would need only first next sibling that's not hidden this would be your solution:
$(".selected~tr:not(':hidden')").first();
https://jsfiddle.net/r3f22uzn/
I'm not sure why this isn't working:
$(getSelectedRow()).find("~tr:not(':hidden')").first();
but this should work:
$(getSelectedRow()).find("~tr:not(':hidden')").each(function(){
// first element
$(this).css("background", "black")
return false;
});
https://jsfiddle.net/r3f22uzn/3/
I am traversing the divs on my page and looking up child elements using find and supplying a classname
select elements and input elements are located, but the 3 TDs I am trying to find are returning nothing
Here is the code snippet
$.each($(".ccypair"), function(index, element) {
var elements = {
selectElement : $(element).find('.selectstyle'),
inputElement : $(element).find('.inputstyle'),
tdElement1 : $(element).find('.decayTime'),
tdElement2 : $(element).find('.price.bidprice'),
tdElement3 : $(element).find('.price.offerprice')
};
});
Now the first two find() lines work fine, but the three tdElement ones below resolve to nothing. Anyone able to tell me where I am going wrong. I suspect for TD I need to have a different selector?
Apologies here is the html
<div class="ccypair" id="ccypairdiv_0">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
<div class="ccypair" id="ccypairdiv_1">
<form>
<table>
<tr>
<td colspan="2" class="top currency"><select class="ccypairselect"/></td>
<td colspan="2" class="top volume"><input class="ccypairvolume" type="text" value="1m" autocomplete="off"/></td>
<td colspan="2" class="top decaytime">00h:00m:00s</td>
</tr>
<tr>
<td colspan="3" class="price bidPrice">---.---</td>
<td colspan="3" class="price offerPrice">---.---</td>
</tr>
</table>
</form>
</div>
Thanks
First check if your jQuery is loading with the $, the try this
//think about structure, it makes your code more legible
$(".ccypair").each(function(index) {
var element = $(this); //each .ccypair found
var elements = {
selectElement : element.find('.selectstyle'),
inputElement : element.find('.inputstyle'),
tdElement1 : element.find('.decayTime'),
tdElement2 : element.find('.price.bidprice'),
tdElement3 : element.find('.price.offerprice')
};
});
cheers
As always a back to basics approach worked. A simple typo was the root cause here. Apologies
On that note. Does jQuery provide a flag so that rather than failing to locate an element and failing silently it will print out an error message. This would be really helpful?
I am trying to hide a button in a table column based on another column value, there's a table column field call "Archive" and if that value is true, I want to hide a button from another column. The code below I have however only hides the button in the first row and ignore subsequent rows. Please kindly assist. Thanks.
<table class="table table-striped table-bordered">
<tr>
<td width="8%" class="table_pink" style="background-color:#ED4085">Name</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Email</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Country</td>
<td width="8%" class="table_pink" style="background-color:#ED4085">Time</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">WrongAtQuestion</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">Winner?</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">CreatedDateTime</td>
<td width="5%" class="table_pink" style="background-color:#ED4085">Hidden</td>
<td width="20%" class="table_pink" style="background-color:#ED4085">Action</td>
</tr>
#foreach (var item in Model)
{
if (item.Archive)
{
<script type="text/javascript">
$('#hideButton').hide();
</script>
}
<tr>
<td>#item.Name</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Time</td>
<td>#item.WrongAtQuestion</td>
<td>#item.IsWinner</td>
<td>#item.CreatedDateTime</td>
<td>#item.Archive</td>
<td><a class="btn btn-primary" href="#" id="hideButton" onclick="deleteEntry('#item.Id', '#item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a></td>
</tr>
}
</table>
Well the first problem is that you are creating invalid html. The id attribute is supposed be unique, but in every row you're outputting an anchor with id="hideButton".
When you then use $('#hideButton') it will find (in most browsers) the first element with that id, not all of them. But even if duplicate ids were allowed, there's nothing to tie the script with $('#hideButton').hide() to any particular row - just because the script block happens to precede the row doesn't make a connection between them.
I'd suggest instead that you get rid of that script block entirely, and then use a server-side if inside the td element with the link to only include the link if item.Archive is false. Then you wouldn't need any JS/jQuery/CSS. I'm not familiar with the server-side language you're using, but in pseudo code it might look something like this:
<td>
#if(!item.Archive){
<a class="btn btn-primary" href="#" onclick="deleteEntry('#item.Id', '#item.Name'); return false;"><i class="icon-white icon-trash"></i> Hide from Leaderboard</a>
}
</td>
Another alternative would be to use server-side code to add class="archive" to the relevant anchor elements, and then use this jQuery:
$(document).ready(function() {
$("a.archive").hide();
});
(Or if you need to do other operations depending on the archive status you might like to put the class on the tr element and use $("tr.archive a.btn").hide();.)
I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).
You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});
You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.
$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID