jQuery——动态给表格添加序号
摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html
很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候我们对表格的序号直接输出是比较麻烦的,所以尝试一下使用jquery动态输出吧~~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://common.cnblogs.com/script/jquery.js"
type="text/javascript"></script>
<title>jQuery</title>
</head>
<body>
<table width=500 border=2>
<tr><td width=250>序号</td><td width=250>项目</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
<tr><td></td><td>Port</td></tr>
</table>
</body>
</html>

原始效果:

JS代码如下:

$(function(){
//$('table tr:not(:first)').remove();
var len = $('table tr').length;
for(var i = 1;i<len;i++){
$('table tr:eq('+i+') td:first').text(i);
}
});


end----------------------------------------------------------------------------------------------
jQuery——动态给表格添加序号的更多相关文章
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 在<s:iterator>标签里给动态表格添加序号
在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...
- 第84天:jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 使用jQuery动态克隆表格,并且添加至div中(使用前需要引入jQuery)
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JQUERY动态绘制表格,实现动态添加一行,删除一行
HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...
- JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...
- element表格添加序号
表格代码:黄色部分为序号列关键代码上图: <el-table :data="tableData" border height="480" style=&q ...
- jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...
随机推荐
- opensuse安装pycurl失败记录
早上在opensuse安装pycurl,一直出现如下错误: pepper@VM_56_243_suse:~/code/gitosis-autotest> pip install pycurl C ...
- nmon进行性能分析
在压测的时候,搭配nmon,可以很好的记录机器cpu情况,内存情况 下载 需要下载nmon和nmon analyser,到各自的官网下载. nmon可以根据自己的操作系统版本下载二进制文件,免去安装. ...
- iPhone X 适配
背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮.作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出来?Tabbar 会不会被圆角 ...
- C语言中处理结构体的原理
汇编中有几种寻址方式,分别是直接寻址:(ds:[idata]).寄存器间接寻址(ds:[bx]).寄存器相对寻址(ds:[bx + idata].ds:[bx + si])基址变址寻址(ds:[bx ...
- CSS列表及导航条
大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条. 垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...
- (2环境架设)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html2环境架设http://www.cn ...
- mongodb 的进库操作
mongo show dbs use xxx show collections db.xxx.find() db.users.update({ "xxx" : ObjectId( ...
- Android权限管理知识学习记录
一.Android权限背景知识 在Android 6.0之前,所申请的权限只需要在AndroidManifest.xml列举就可以了,从而容易导致一些安全隐患,因此,在Android 6.0时,Goo ...
- vim保存时提示: 无法打开并写入文件
命名内容已经写入,但是不知怎的就是没法保存,估计是权限不足的问题. 切换到root用户,进行了同样的操作,发现没有该问题了. 经验教训:编辑配置文件时,记得切换到root用户进行编辑.
- [转]设置Jupyter-Notebook表格打印多个变量的值
有一点已经众所周知.把变量名称或没有定义输出结果的语句放在cell的最后一行,无需print语句,Jupyter也会显示变量值.当使用Pandas DataFrames时这一点尤其有用,因为输出结果为 ...