使用jQuery在最後一列之後添加列

Question

我在html文檔的底部有下面的jQuery代碼。我的目的是根據下面的html代碼在最後一列之後添加一列。

tbody（id =「output」）是作爲jsp文件的輸出生成的。我已經在JSFIDDLE上測試過它，它工作正常，但我無法讓它在我的html頁面上工作。任何人有想法？

JSFIDDLE

<script> 
    $('document').ready(function() { 
     var tr = $('#table tbody tr'); 
     var td = '<td><button>Reserve</button></td>'; 
     tr.each(function() { 
      $(td).insertAfter($(this).find('td').eq(3)); 
     }); 
    }); 
</script> 

HTML

<table id="table" class="table table-hover"> 
    <thead> 
     <tr> 
      <th width="15%"><b>Course Code</b> 
      </th> 
      <th width="25%"><b>Course Description</b> 
      </th> 
      <th width="35%"><b>Available Schedule</b> 
      </th> 
      <th width="10%"><b>Reservations</b> 
      </th> 
      <th width="15%"></th> 
     </tr> 
    </thead> 
    <tbody id="output"> 
     <tr> 
      <td>ME101</td> 
      <td>Marine Engineering 101</td> 
      <td>June 1 - August 30, 2014</td> 
      <td>56</td> 
     </tr> 
     <tr> 
      <td>ME102</td> 
      <td>Marine Engineering 102</td> 
      <td>June 1 - August 30, 2014</td> 
      <td>32</td> 
     </tr> 
     <tr> 
      <td>ME201</td> 
      <td>Marine Engineering 201</td> 
      <td>June 1 - August 30, 2014</td> 
      <td>54</td> 
     </tr> 
     <tr> 
      <td>ME202</td> 
      <td>Marine Engineering 202</td> 
      <td>June 1 - August 30, 2014</td> 
      <td>47</td> 
     </tr> 
     <tr> 
      <td>CS101</td> 
      <td>Certificate in Seamanship 101</td> 
      <td>June 1 - August 30, 2014</td> 
      <td>12</td> 
     </tr> 
    </tbody> 
</table> 

編輯

這是餐桌上的全功能HTML結構。請注意，「loadJSP」函數生成tbody行的html輸出。

<div class="col-md-12 well setup-content" id="step-2"> 
    <h1 class="text-center">STEP 2</h1> 

    <p>Select the schedule you wish to attend by clicking the check button on the rightmost column.</p> 
    <hr class="colorgraph"> 
    <form id="reservation2" name="reservation2" class="form-horizontal" role="form" method="post" action="#"> 
     <div class="table-responsive"> 
      <table id="table" class="table table-hover"> 
       <thead> 
        <tr> 
         <th width="15%"><b>Course Code</b> 
         </th> 
         <th width="25%"><b>Course Description</b> 
         </th> 
         <th width="35%"><b>Available Schedule</b> 
         </th> 
         <th width="10%"><b>Reservations</b> 
         </th> 
         <th width="15%"></th> 
        </tr> 
       </thead> 
       <tbody id="output"> 
        <!-- Data output from JSP will be displayed here. --> 
        <script> 
         loadJSP("pntc_fetchschedules.jsp"); 
        </script> 
       </tbody> 
      </table> 
     </div> 
     <hr class="colorgraph"> 
     <div class="control-group text-center"> 
      <button id="activate-step-3" class="btn btn-primary btn-lg" tabindex="17">Proceed to Step 3</button> 
     </div> 
     </form> 
</div> 

UPDATE

它終於奏效。正如Rajaprabhu所建議的，問題在於文件pntc_fetchschedules.jsp。看來jQuery無法看到jsp文件的輸出。作爲一個修復，我把jquery腳本放在pntc_schedules.jsp裏面，儘管我的目的是在jsp生成它們之後改變html列（也就是說，不用接觸jsp文件本身）。

如果有人根據我的意圖有更好的解決方案，我會非常感激。

謝謝Rajaprabhu的幫助！

Answer 1

如果我的理解是正確的，你需要插入在tbody ID爲新行作爲output

試試這個：

$('document').ready(function() { 
    $("#output").children().each(function(){ 
     $(this).append("<tr><td><input type='button' value='Reserve'></input>"); 
    }); 
});