摘录自：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. Spring Cloud Consul入门

    1. Consul介绍 Consul是一套开源的分布式服务发现和配置管理系统,支持多数据中心分布式高可用.Consul是HashiCorp( Vagrant的创建者)开发的一个服务发现与配置项目,用G ...

  2. webgl鱼眼算法

    在网页上面实现,采用的是球面映射和材质线性映射,这里注意的是用线性映射保留了球面的感觉,而不是采用sin映射,sin映射在边缘会产生很难看的效果. 最后效果如下:

  3. Python网络编程篇之socket

    1 socket 插座?呵呵,想多了,翻译过来意思是套接字! A network socket is an internal endpoint for sending or receiving dat ...

  4. while100以内的偶数

    #显示100以内的偶数 #声明i i = 1 #开始循环条件为i不等于100,执行while代码块 while i != 100: #给i加1 i +=1 #如果循环到此时i的取余运算为0则打印i i ...

  5. Django-Views模块详解

    http请求中产生的两个核心对象 http请求: HttpRequest http响应: HttpResponse 所在位置 django.http httpRequest属性: HttpReques ...

  6. GO开发[三]：fmt,strings,strconv，指针，控制结构

    一.fmt包 %v 值的默认格式表示.当输出结构体时,扩展标志(%+v)会添加字段名 %#v 值的Go语法表示 %T 值的类型的Go语法表示 %% 百分号 %t 单词true或false %b 表示为 ...

  7. Oracle 11G Client 安装就可以用上Oracle11G啦，不用傻傻的安装2G多的Oracle啦，安装特别简单，使用起来更简单

    下载地址: http://download.oracle.com/otn/nt/oracle11g/112010/win32_11gR2_client.zip 先将下载下来的ZIP文件解压,并运行se ...

  8. 循序渐进之Spring AOP(1) - 原理

    AOP全称是Aspect Oriented Programing,通常译为面向切面编程.利用AOP可以对面向对象编程做很好的补充. 用生活中的改装车比喻,工厂用面向对象的方法制造好汽车后,车主往往有些 ...

  9. Java入门篇（二）——Java语言基础（上）

    本篇我们开始进入Java的学习,首先在学习如何编写Java语言前要先了解Java程序的基本结构. 一.Java程序的基本结构 一个Java程序的基本结构大体可以分为包.类.main()主方法.标识符. ...

  10. 【测试编码URI的函数】

    //测试编码URI的函数 var url="http://www.phpfamily.org/test.php?search= this is a test&sum=1+2" ...