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

我在html文档的底部有下面的jQuery代码。我的目的是根据下面的html代码在最后一列之后添加一列。使用jQuery在最后一列之后添加列

tbody（id =“output”）是作为jsp文件的输出生成的。我已经在JSFIDDLE上测试过它，它工作正常，但我无法让它在我的html页面上工作。任何人有想法？

<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的帮助！

来源

2014-02-20 JNewbie

做你检查控制台????? –

控制台上没有错误。 – JNewbie

你正在使用哪个jQuery版本 –

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

试试这个：

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

来源

2014-02-20 05:00:27 Cyberpks

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

回答

相关问题