摘录自：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. ubuntu16.04编译安装php7.2

    1,下载解压 tar xf php-7.2.0.tar.gz cd php-7.2.0/ 2,安装必要的库 sudo apt-get install libxml2-devsudo apt-get i ...

  2. Asp.Net MVC 身份验证-Forms

    Asp.Net MVC 身份验证-Forms 在MVC中对于需要登录才可以访问的页面,只需要在对应的Controller或Action上添加特性[Authorize]就可以限制非登录用户访问该页面.那 ...

  3. C盘无损扩容

    工具: 分区助手专业版5.5 下载地址:http://pan.baidu.com/s/1slHPGDn 步骤 打开分区助手,点"扩展分区向导". 弹出对话框,因为是扩展C盘所以选& ...

  4. windows系统安装securtCRT

    说明:securtCRT可以ssh liunx主机,或者网络设备,如路由器,交换机,防火墙等设备,很多新手不会安装,因为正版要钱啊,对于小老百姓,还是用破解的吧 不说废话,开始搞起来. 软件下载链接: ...

  5. 【django基础】

    一.MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Template(模版):负责如何把页面展示给用户 View(视图):负责业务逻辑,并在适当的 ...

  6. Angular-搜索框及价格上下限

    Angular-搜索框及价格上下限 闲来无事,写一个简单的angular的搜索框. 1.要求: 利用 AngularJS 框架实现手机产品搜索功能,题目要求: 1)自行查找素材,按照原有数据格式将手机 ...

  7. Zedboard(二)使用Vivado+SDK开发嵌入式应用程序——实例一

    本次介绍用Vivado构建Zedboard开发板的硬件平台+SDK开发应用程序(Zedboard裸机开发) 过程如下: 一.运行Vivado,建立新工程 指定好工程路径,下一步,选择RTL Proje ...

  8. MongoDB建立主从复制小案例(一主一从)

    花了两天学习了mongoDB, 今天接触到了mongo的主从配置, 把它记下来 1. 开启两个mongo服务器(用于一主一从, 没有加安全验证相关参数 : 可以使用mongd-help查看) mong ...

  9. CSS3让文本自动换行——word-break属性

    1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-b ...

  10. bzoj 4918: 回文数对

    传送门 Description 给定区间[L,R],请统计有多少对整数A,B(L<=A,B<=R)满足A xor B的值在二进制表示下,去掉所有前导0后是回文串 Input 第一行包含一个 ...