Develop Reference

jQuery only execute .append once

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

Angular Footable to show selected column data only

I was wondering if there is a way in Footable to show only the data colmuns for the one you have selected and hide the others.
For example, let's say the below are the list of albums (rows in my footable)
album-name-1
album-name-2
album-name-3
And if I select the album 1, it's data appears as follows:
album-name-1
track1
track2
track3
album-name-2
album-name-3
If I select album2, only those details appear and the previously expanded tracks from album 1 get collapsed as follows:
album-name-1
album-name-2
track1
track2
track3
album-name-3
I am using angularJS to use footable. Any suggestions on how to achieve this ? Like I know if I didn't use fancy stuff like Footable, I can achieve this by trigerring a click event using ng-click and pass on the index to show/hide only what I need. Just as this answer I asked previously: AngularJS display list right below the URL
But here, I am trying to do with the Footable plugin. Here is my html snippet for the same:
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
<thead>
<tr>
<th data-toggle="all">Release Title</th>
<th data-toggle="all">Release Genre</th>
<th data-toggle="all">Classical</th>
<th data-hide="all">Tracks</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="album in vm.albums" footable>
<td ng-click="vm.editAlbum(album, $index)">{{album.data.title}}</small></td>
<td>{{album.data.genre}}</td>
<td ng-if!="album.data.classical">No</td>
<td ng-if="album.data.classical">Yes</td>
<td><br>
<li ng-repeat="track in album.data.tracks">
<a ng-click="vm.selectTrack(album, track)">{{track.title}}</a>
</li>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>

jQuery overriding hyperlinks on table's td values

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.

Show closest with spec. class

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.

HTML + Hiding element from table based on value from another column

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