css3 自动生成序号(不使用JS,可任意排序)
2012-09-25 00:17
183 查看
一个table 需要在第一列生成序号:1、2、3、4、5...... 并且自适应行数
不使用后台程序,开始考虑使用JS,但是一旦前台排序后,序号就乱了,
最后采用CSS的一个计数器方法实现!
如果还是不太明白,可以看下面这个在线的例子:DEMO
PS:不支持CSS3的浏览器不行!
不使用后台程序,开始考虑使用JS,但是一旦前台排序后,序号就乱了,
最后采用CSS的一个计数器方法实现!
<table cellspacing="0"> <tbody> <tr> <td class="SortId"> </td> <td>上海大华贸易有限公司</td> </tr> <tr> <td class="SortId"> </td> <td>YFKSQ-20120924-0007</td> </tr> <tr> <td class="SortId"> </td> <td>现金</td> </tr> </tbody> </table>
/*自动序号*/ tbody { counter-reset:sectioncounter; } .SortId:before { content:counter(sectioncounter); counter-increment:sectioncounter; }
如果还是不太明白,可以看下面这个在线的例子:DEMO
PS:不支持CSS3的浏览器不行!
相关文章推荐
- css3 -- 自动生成序号(不使用JS,可任意排序)
- css3 自动生成序号(不使用JS,可任意排序)
- .NET----使用母版页后,控件名称自动生成导致js无法正常操作.net控件的问题
- 数组与集合的应用之常用集合的使用(用TreeSet生成不重复自动排序随机数组)
- 使用vbscript生成36进制自动增长序号的实现代码
- 使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来,并具有动态排序、动态生成查询、自动分页功能
- CSS3 animation实现图片轮播效果 自动显示 无需使用js 含代码(图片轮播效果一)
- Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录
- CSS3使用计数器自动添加数字序号功能
- 使用js自动生成表格的行及元素并可以删除选中行
- jsdoc注释规范工具(使用 JSDoc 3 自动生成 JavaScript API 文档)
- 使用JSDoc自动生成代码文档
- 用T-SQL语句 自动生成序号 排序
- 使用母版页后,控件名称自动生成导致js无法正常操作.net控件的问题
- .NET----使用母版页后,控件名称自动生成导致js无法正常操作.net控件的问题
- 如何在jasperreport自动生成序号
- 让delphi生成的程序自动使用管理员权限,带有uac盾牌
- 关于如何使用SqlServer中@@Identity、@@IDENT_CURRENT、@@SCOPE_Identity获取自动生成列的值的区别(精简版)
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用函数自动生成n层目录