I want to add an extra row with some extra calculations to an existing table. The table doesn't have a header tag, it's just figuring out what CSS to apply by itself. I'm adding an extra header via the code found below. Right now it's adding the header twice. The (edited) code of the table looks like this:
<!--This code is in a <form> with the id="train_form", hence the usage in the jQuery code-->
<table class="vis" style="width: 100%">
<tbody>
<tr>
<th style="width: 20%">Eenheid</th>
<th style="min-width: 400px">Behoefte</th>
<th>In het dorp/Totaal</th>
<th style="width: 120px">Rekruteren</th>
<th style="width: 80px">To Do:</th>
</tr>
<tr class="row_a">
<td class="nowrap">
<a href="#" class="unit_link" data-unit="spear">
<img src="image.png" style="vertical-align: middle" alt="" class="">
Speervechter
</a>
</td>
</tr>
<!-- There are 3 more entries here, but to not be too long I've removed them. They are not really necessary-->
<tr>
<td colspan="3">
</td>
<td>
<input class="btn btn-recruit" style="float: inherit" type="submit" value="Rekruteren" tabindex="11">
</td>
<th style="width: 80px">To Do:</th>
</tr>
</tbody>
</table>
The lines <th style="width: 80px">To Do:</th> are added by my script. The problem is that it also adds it to the last <td>. I've looked at quite a few 'solutions', but they are not helping. It's still adding the code twice (see screenshot below).
The code that I'm using to add the lines:
$(function() {
var done = false;
if (!done) {
$("#train_form > .vis > tbody > tr:not(.row_a, .row_b)").one().append("<th style='width: 80px'>To Do:</th>");
done = true;
};
}).one();
As you can see I've tried using the .one() methods, and I've tried using a bool for it. Both don't work, since this code still gives the table seen in the image above.
Just to be clear, I have no control over the source, this is a script for an online browser game.
What am I doing wrong?
I think you want $.first() instead of $.one():
$("#train_form > .vis > thead > tr:not(.row_a, .row_b)")
.first()
.append("<th style='width: 80px'>To Do:</th>");
Related
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 have a table as below and am trying to open a pop-up window with the link '/ledesInvoiceErrors.do?InvoiceId='+parentInstanceId' when user clicks on Invoice number columns of table (INV1 and INV2) instead of going to the hyper link associated with invoice number fields.
http://jsfiddle.net/pmgguwob/3/
<div class="listTable expanded">
<table class="searchResults {id:321}">
<thead>
<tr class="tipAdded">
<th class="first unsortable ui-state-default ui-state-hover ui-state-active"></th>
<th data-name="Invoice Number" class="typeString ui-state-default ui-state-hover sort asc ui-state-active" id="sort_invoiceNumber">
Invoice Number
</th>
<th data-name="Invoice Total" class="typeMoney last ui-state-default ui-state-hover ui-state-active sort" id="sort_invoiceTotal">
Invoice Total
</th>
</tr>
</thead>
<tbody class="">
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV1
</div>
<input value="65" name="invoices0.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=51;parentFieldName=invoices">
INV1
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
15.25 USD
</div>
</td>
</tr>
<tr class="tipAdded">
<td class="first">
<div style="display:none" class="renderedValue">
INV2
</div>
<input value="66" name="invoices1.id" type="hidden" class="check"/>
</td>
<td class="typeString ">
<div class="data typeString"><a tooltip="" class="listLink " title="" href="/CP/show.do?parentInstanceId=55;parentFieldName=invoices">
INV2
</a>
</div>
</td>
<td class="typeMoney ">
<div class="data typeMoney">
111.25 USD
</div>
</td>
</tr>
</tbody>
</table>
Am a very beginner of jQuery and I dont really know how to achieve this. Could anyone please me with this?
Note: I dont have liberty of modifying the hyperlinks associated with Invoice number fields since these links are generated from our internal framework. but I can embed jquery script on my page to override the hyperlinks
SOLUTION UPDATED
http://jsfiddle.net/pmgguwob/10/
To override your hyperlink's behaviour, you can do something along the lines of:
$(function(){
// you may have to narrow down the selector here to a specific class or 'td'
$(".searchResults a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
window.open(url, 'window name', 'window settings');
return false;
});
});
Updated Fiddle
In this case, something like this (fiddle):
$("a").click(function (e) {
e.preventDefault();
var mills = (new Date).getTime();
window.open($(this).attr("href"), mills);
//$("body").append("#" + $(this).attr("href") + "#");
});
I'm using mills to give each window a new handle, so you don't reuse a window and potentially confuse your user by reloading a window that's hidden from them. The last line is just to show the URL it's using for testing; you might want to massage that value a little, but I believe it's right as is.
I know window.open isn't new and cool, but its options let you control the new window's appearance with likely enough granularity. You could jQuery that up instead if you wanted.
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'm adding rows with javascript to this tbody
<div id="listingContainer"><div id="listing"><table class="table table-hover table-striped" id="listingTable"><tbody id="places"><img src="images/loading.gif"></tbody></table></div></div>
I tried this:
$("#places").html('');
but is adding to it
http://jsfiddle.net/sebababi/2JTPD/
It does not work cause
tbody does not accepts img tag as child element.
This is an example of valid table markup. Act accordingly
<table>
<tbody>
<tr>
<td id="places">
<img src="loading.gif">
</td>
</tr>
</tbody>
</table>
Note: The tbody is not necessary
First of all, you'll need your <img> tag to be within a <td> tag. Then use remove(); to get rid of the image like so:
HTML:
<tbody id="places">
<tr>
<td>
<img src=".../loading.gif">
</td>
</tr>
</tbody>
jQuery:
$("#places img").remove();
Here is fiddle: http://jsfiddle.net/2JTPD/29/
Looking for something like this?
http://jsfiddle.net/chace/2JTPD/28/
window.setTimeout(blahFunc,5000)
function blahFunc() {
$("#places").html('done');
}
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();.)