摘录自: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——动态给表格添加序号的更多相关文章

  1. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  2. 在<s:iterator>标签里给动态表格添加序号

    在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...

  3. 第84天:jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. 使用jQuery动态克隆表格,并且添加至div中(使用前需要引入jQuery)

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  5. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. JQUERY动态绘制表格,实现动态添加一行,删除一行

    HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...

  7. JQuery动态操作表格

    新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

  8. element表格添加序号

    表格代码:黄色部分为序号列关键代码上图: <el-table :data="tableData" border height="480" style=&q ...

  9. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

随机推荐

  1. opensuse安装pycurl失败记录

    早上在opensuse安装pycurl,一直出现如下错误: pepper@VM_56_243_suse:~/code/gitosis-autotest> pip install pycurl C ...

  2. nmon进行性能分析

    在压测的时候,搭配nmon,可以很好的记录机器cpu情况,内存情况 下载 需要下载nmon和nmon analyser,到各自的官网下载. nmon可以根据自己的操作系统版本下载二进制文件,免去安装. ...

  3. iPhone X 适配

    背景 iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮.作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出来?Tabbar 会不会被圆角 ...

  4. C语言中处理结构体的原理

    汇编中有几种寻址方式,分别是直接寻址:(ds:[idata]).寄存器间接寻址(ds:[bx]).寄存器相对寻址(ds:[bx + idata].ds:[bx + si])基址变址寻址(ds:[bx ...

  5. CSS列表及导航条

    大多数网页中都包含某种形式的列表,今天我们就来联系几个基本的导航条.   垂直导航条 注意要点: 去掉默认的项目符号(list-style-type:none),将外边距和内边距都设为0. 以em设置 ...

  6. (2环境架设)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练

    从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练 1综述http://www.cnblogs.com/jsxyhelu/p/7907241.html2环境架设http://www.cn ...

  7. mongodb 的进库操作

    mongo show dbs use  xxx show collections db.xxx.find() db.users.update({ "xxx" : ObjectId( ...

  8. Android权限管理知识学习记录

    一.Android权限背景知识 在Android 6.0之前,所申请的权限只需要在AndroidManifest.xml列举就可以了,从而容易导致一些安全隐患,因此,在Android 6.0时,Goo ...

  9. vim保存时提示: 无法打开并写入文件

    命名内容已经写入,但是不知怎的就是没法保存,估计是权限不足的问题. 切换到root用户,进行了同样的操作,发现没有该问题了. 经验教训:编辑配置文件时,记得切换到root用户进行编辑.

  10. [转]设置Jupyter-Notebook表格打印多个变量的值

    有一点已经众所周知.把变量名称或没有定义输出结果的语句放在cell的最后一行,无需print语句,Jupyter也会显示变量值.当使用Pandas DataFrames时这一点尤其有用,因为输出结果为 ...