这是一篇面向前端新手的教程，提供了实现table表头点击排序和列宽拖动功能的demo。开发者需要引入jQuery库，为table指定id，并将需要排序的td标记为'order'类。通过初始化SortTable对象，如var mytable = new SortTable('listSort')，即可启用这些功能。文章末尾还分享了前端技术交流QQ群信息。
做前端的开发有五年多了，今天上传一个关于table点击表头排序和拖动左右可以改变列的宽度的demo给加入前端开发的新手们参考参考。
代码如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
</style>
<table cellspacing="1" cellpadding="1" width="100%" id="listSort">
<thead>
<tr>
<td style="border:1px dotted silver">选择</td>
<td style="border:1px dotted silver" class="order">序号</td>
<td style="border:1px dotted silver" class="order">教师编号</td>
<td style="border:1px dotted silver" class="order">教师姓名</td>
<td style="border:1px dotted silver" class="order">教师性别</td>
<td style="border:1px dotted silver">操作</td>
<tr>
</thead>
<tbody>
<tr>
<td style="border:1px dotted silver"><input type="checkbox" value="99" name="delTeacher[]"></td>
<td style="border:1px dotted silver">1</td>
<td style="border:1px dotted silver">99</td>
<td style="border:1px dotted silver">liwen</td>
<td style="border:1px dotted silver">男</td>
<td style="border:1px dotted silver"><a href="/teacherManage/add?tno=99">编辑</a> <a href="/teacherManage/delete?tno=99">删除</a></td>
</tr><tr>
<td style="border:1px dotted silver"><input type="checkbox" value="s001" name="delTeacher[]"></td>
<td style="border:1px dotted silver">2</td>
<td style="border:1px dotted silver">s001</td>
<td style="border:1px dotted silver">s001</td>
<td style="border:1px dotted silver">男</td>
<td style="border:1px dotted silver"><a href="/teacherManag
<style>
</style>
<table cellspacing="1" cellpadding="1" width="100%" id="listSort">
<thead>
<tr>
<td style="border:1px dotted silver">选择</td>
<td style="border:1px dotted silver" class="order">序号</td>
<td style="border:1px dotted silver" class="order">教师编号</td>
<td style="border:1px dotted silver" class="order">教师姓名</td>
<td style="border:1px dotted silver" class="order">教师性别</td>
<td style="border:1px dotted silver">操作</td>
<tr>
</thead>
<tbody>
<tr>
<td style="border:1px dotted silver"><input type="checkbox" value="99" name="delTeacher[]"></td>
<td style="border:1px dotted silver">1</td>
<td style="border:1px dotted silver">99</td>
<td style="border:1px dotted silver">liwen</td>
<td style="border:1px dotted silver">男</td>
<td style="border:1px dotted silver"><a href="/teacherManage/add?tno=99">编辑</a> <a href="/teacherManage/delete?tno=99">删除</a></td>
</tr><tr>
<td style="border:1px dotted silver"><input type="checkbox" value="s001" name="delTeacher[]"></td>
<td style="border:1px dotted silver">2</td>
<td style="border:1px dotted silver">s001</td>
<td style="border:1px dotted silver">s001</td>
<td style="border:1px dotted silver">男</td>
<td style="border:1px dotted silver"><a href="/teacherManag
最低0.47元/天 解锁文章
扫一扫
4452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
