0

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

Example

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?

MagicLegend
  • 328
  • 1
  • 5
  • 22
  • http://api.jquery.com/one/ I'm confused about your attempted usage of `one()`. What api are you looking at that made you think it can be used like that? – Taplar Nov 25 '16 at 20:31
  • Well, basically just goofing around and keeping to try. I've looked at the examples given at the api page you mentioned. Apart from that I have used these sources: http://stackoverflow.com/questions/34476696/jquery-append-div-only-once-on-click , http://stackoverflow.com/questions/24206953/jquery-append-only-once & http://stackoverflow.com/questions/24076422/how-to-execute-jquery-code-only-once – MagicLegend Nov 25 '16 at 20:36
  • @Taplar, I suspect he was after `first()` instead of `one()`. – Paul Nov 25 '16 at 20:37
  • `first()` would work, sure. Please reference that api to understand what `one()` actually does. – Taplar Nov 25 '16 at 20:38

1 Answers1

3

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>");
Paul
  • 19,704
  • 14
  • 78
  • 96
  • As I said: "Just to be clear, I have no control over the source, this is a script for an online browser game." It isn't that easy unfortunately... Otherwise I'd have done that by now ;) – MagicLegend Nov 25 '16 at 20:32
  • 1
    Ah, shoot. I'm sorry I didn't read carefully. I'll think about this some more and if I can amend my answer I will otherwise I'll delete it. – Paul Nov 25 '16 at 20:34
  • Yes! That's it! It works correctly now. Thank you so much! There are so many of those calls, can't remember them all :p Case closed. Thank you for your help! – MagicLegend Nov 25 '16 at 20:38
  • 1
    Great! I'm glad I was able to redeem myself after my reading failure. – Paul Nov 25 '16 at 20:42