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----------------------------------------------------------------------------------------------

时间: 2024-10-11 07:51:30

jQuery——动态给表格添加序号的相关文章

在&lt;s:iterator&gt;标签里给动态表格添加序号

在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value="" var="" status="st">                            <tr>                                <td><s:property value=&

jquery实现的表格添加或者删除行操作

jquery实现的表格添加或者删除行操作:对于表格的使用应该是非常的熟悉了,下面是一段非常强大的代码,能够实现表格行的添加删除甚至可以对单元格进行编辑,下面就分享一下次代码,希望能够对大家有所帮助,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.soft

第84天:jQuery动态创建表格

jQuery动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 table {

JQuery动态操作表格

新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

element表格添加序号

表格代码:黄色部分为序号列关键代码上图: <el-table :data="tableData" border height="480" style="width: 100%"> <el-table-column label="序号" width="70px"> <template slot-scope="scope"> {{scope.$index+

jquery动态合并表格行

利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> td{ border:1px solid red; } </style> <

jquery动态创建表格

html代码 <input name="myname" id="myinput" onfocus="showMydiv('testname','sex','addr');"> <div id="mydiv" style="display:none;height:200px;width:196px;position:absolute;z-index:100;left:83px;top:40px;&qu

给Jquery动态添加的元素添加事件

给Jquery动态添加的元素添加事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>        

[转载]给Jquery动态添加的元素添加事件

原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table> <tbody> <tr> <td