jQueryは一度だけ.appendを実行します

Question

余分な行をいくつか追加して、既存のテーブルに追加したいと考えています。テーブルにはヘッダータグはありません。それは単にCSSを適用するだけです。私は以下のコードを使って余分なヘッダーを追加しています。今はヘッダーを2回追加しています。

<!--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> 

私のスクリプトによって追加され<th style="width: 80px">To Do:</th>行：表の（編集済み）のコードは次のようになります。問題は、それが最後の<td>にも追加されてしまうことです。私はかなりの「解決策」を見てきましたが、彼らは助けていません。まだコードを2回追加しています（下記のスクリーンショットを参照）。

私は行を追加するために使用しているコード：あなたは私が.one()メソッドを使用して試してみた、と私はブール値を使用して試した見ることができるように

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

をそれ。このコードは上記の画像に見られるテーブルを提供しているため、どちらも機能しません。

私はソースを制御できません。これはオンラインブラウザゲームのスクリプトです。

私は間違っていますか？

Answer 1

私はあなたの代わりに$.one()の$.first()をしたいと思う：

$("#train_form > .vis > thead > tr:not(.row_a, .row_b)") 
    .first() 
    .append("<th style='width: 80px'>To Do:</th>");