Question

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

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>

更新

终于奏效了。正如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>");
    });
});

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

1 个答案: