Question

当我使用jQuery添加到表时

 $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');

div包裹的表单 - <div id="pager" class="pager">始终保持在同一位置，即使表格的大小增加，如附图所示，以红色圈出：我正在使用这个插件：http://tablesorter.com/docs/index.html

enter image description here

我希望在将新项目添加到表格时将此表单推送到表格的底部。使用jquery添加项目。我想我需要刷新dom才能使表格显示在表格底部？有替代方法吗？

以下是运行的代码：http://jsfiddle.net/eUmDW/

整个代码：

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://tablesorter.com/__jquery.tablesorter.js" type="text/javascript"></script>
 <script src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />

  <script type="text/javascript">
    $(document).ready(function() {
                { 
                    $("#myTable").tablesorter({widthFixed: true, widgets: ['zebra']}).tablesorterPager({container: $("#pager")}); 
                    $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
                    $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
                    $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
                    $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
                    $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
                    $('#myTable > tbody:last').prepend('<tr><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
                } 
    });

   </script>

</head>


<body>

<table id="myTable" cellspacing="1" class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Student01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
        <tr>
            <td>AStudent01</td>
            <td>Languages</td>
            <td>male</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
</tbody>
</table>

<div id="pager" class="pager">
    <form>
        <input type="text" class="pagedisplay"/>
        <select class="pagesize">
            <option selected="selected"  value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option  value="40">40</option>
        </select>
    </form>
</div>

</body>
</html>

Answer 1

由于某种原因，您的小部件正在向您的#pager div添加style="position: absolute; top: 72px;"。

快速解决将css top设置回auto会将其修复

  $("#pager").css('top','auto');

http://jsfiddle.net/eUmDW/2/

表映射到表时，表单未添加到表的底部

1 个答案: