摘录自: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. Head First设计模式之装饰者模式

    一.定义 装饰者模式,英文叫Decorator Pattern,在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 动态将职责附加到 ...

  2. Java笔记:字符串详解

    字符串详解 更新时间:2018-1-6 21:20:39 String 字符串创建 String str1="ABC";//推荐使用 String str2 = new Strin ...

  3. java 连接 postgresql

    最近公司用postgresql这个数据库,看网上说这个数据库还算好用,自己就用了一下,我就是用java连接了一下数据库. 其实每个数据库的连接方式大致相同,只是用到的驱动不同,用不同数据库只需要换不同 ...

  4. Nginx集群之WCF分布式消息队列

    目录 1       大概思路... 1 2       Nginx集群之WCF分布式消息队列... 1 3       MSMQ消息队列... 2 4       编写WCF服务.客户端程序... ...

  5. SEO的基本概念 和 提交SITEMAP到搜索引擎

    SEO的基本概念 SEO的基本概念 :我们接触的SEO主要就是做搜索引擎的优化,让搜索引擎更好地收录 我们的网站,不管是首页还是内页,都能有很好的收录和排名.那么我们经常用到的SEO的语句是什么呢?小 ...

  6. C++ 脑筋急转弯

    最近重新温习一下C++的基础知识,这里给大家分享一下,独痛苦不如众痛苦. 先贴出一段示例代码如下: class CTest{ public: CTest(){ ); }; ~CTest(){ if ( ...

  7. 小子给大家分享一个或者多个新手创建tableview经常会遇到的坑(动态创建控件,xib的重用)

    小子最近做了一个根据接口返回的数据在Cell中动态创建控件,感觉应该会一部分人卡在这里,小子就跟大家分享一下: 1.控件重复创建:这个问题出现的原因是动态创建的cell内容的时候,无法进行重用设置,所 ...

  8. git常用使用命令

    Git远程操作详解(from 阮一峰) git clone.git remote.git fetch.git pull.git push git拉取远程分支并创建本地分支 git中文学习文档(详细) ...

  9. Flask分页

    一.flask实现的分页组件 from urllib.parse import urlencode,quote,unquote class Pagination(object): "&quo ...

  10. python3之序列化(pickle&json&shelve)

    1.pickle模块 python持久化的存储数据: python程序运行中得到了一些字符串,列表,字典等数据,想要长久的保存下来,方便以后使用,而不是简单的放入内存中关机断电就丢失数据.python ...