设为首页收藏本站<<< 抵制 IE6 人人有责 >>>

鼎鼎新网

 找回密码
 立即注册

用新浪微博连接

一步搞定

QQ登录

只需一步，快速开始

搜索
热搜: 活动乱码
鼎鼎新网 › 论坛 › 学习天地 › web前端开发 › javascript › Jquery 动态生成表格
返回列表 发新帖
查看: 76|回复: 8

Jquery 动态生成表格 [复制链接]


[至尊红钻4级]发帖数量≥200篇 [未点亮至尊黄钻]威望不足10点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [至尊紫钻8级]金币≥1000个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

  • TA的每日心情
    擦汗
    2011-11-6 17:24:41

    • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]偶尔看看I

     等级: Rank: 9Rank: 9Rank: 9
     级别: 管理员
     UID:  7   [未点亮普号显示]钻石不足100个
     威望:  0
     钻石:  0
     发贴: 211 (0)
     金币: 1585  
     同城币: 0   充值
     贡献:  0
     积分: 1779
     性别: I'm 火星人！
     阅读权限: 200
     在线时长: 0 小时
     注册:2011-8-28
     最后登录: 2011-11-6
    ddxw.net 发表于 2011-9-4 08:21:16 |显示全部楼层 |          |
    <!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>
        <title></title>
        <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
        <!--实现tooltip功能-->
        <style type="text/css">
            body
            {
                font-family: 楷体_GB2312;
                font-size: 24px;
            }
            table
            {
                text-align: center;
            }
            th
            {
                height: 30px;
            }
            td
            {
                height: 30px;
            }
            .bak
            {
                background-color: LightBlue;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#sure").click(function() {
                    var fval = $("#firstname").val();
                    var lval = $("#lastname").val();
                    var age = $("#age").val();
                    var percent = $("#percent").val();
                    //构建表格
                    var str = '<tr><td><input type="checkbox" name="checkbox"/><td>' + '<td>' + fval + '</td>' + '<td>' + lval + '</td>' + '<td>' + age + '</td>' + '<td>' + percent + '</td></tr>';
                    $("table").append(str);
                    str = "";
                })
                //设定初始tr序号
                var logo = 0;
                $(document).keydown(function(e) {
                    var table = $("table tr");
                    //如果按下的是pagedown
                    if (e.keyCode == 40) { //↑
                        //移去所有的tr样式
                        $("tr.bak").removeClass("bak");
                        //为当前所指向的tr加上高亮
                        $("tr:eq(" + logo + ")").addClass("bak");
                        //tr序号加1
                        logo++;
                    }
                    //如果tr序号超过了tr的长度，则返回第一行；
                    if (logo > table.length) {
                        logo = 0;
                    }
                    //如果按下的是pageup
                    if (e.keyCode == 38) {//↓
                        //tr序号在当前序号减一，就是上移一个位置
                        var l = logo - 1;
                        //如果tr序号小于0，也就是此时的tr序号应该在底部;
                        if (l < 0) {
                            l = table.length + l; //重新计算tr序号
                        }
                        $("tr.bak").removeClass("bak");
                        $("tr:eq(" + l + ")").addClass("bak");
                        logo = l; //对logo进行赋值，标识当前tr序号
                    }
                })
            })

        </script>
    </head>
    <body>
        <div id="formdiv" align="center">
            firstname:<input type="text" id="firstname" />
            lastname:<input type="text" id="lastname" />
            age:<input type="text" id="age" />
            percent:<input type="text" id="percent" />
            <input type="button" value="确定" id="sure" />
        </div>
        <table align="center" width="600px" rules="all" bordercolor="blue" style="margin: 5px;">
            <tr>
                <td>
                    <input type="checkbox" name="checkbox1" />
                <td>
                <td>
                    Peter
                </td>
                <td>
                    Parker
                </td>
                <td>
                    28
                </td>
                <td>
                    20.9%
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="checkbox1" />
                <td>
                <td>
                    John
                </td>
                <td>
                    Hood
                </td>
                <td>
                    33
                </td>
                <td>
                    25%
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="checkbox1" />
                <td>
                <td>
                    Clark
                </td>
                <td>
                    Kent
                </td>
                <td>
                    18
                </td>
                <td>
                    44%
                </td>
            </tr>
        </table>
    </body>
    </html>


    使用道具 举报

    
    [至尊红钻6级]发帖数量≥400篇 [至尊黄钻5级]威望≥300点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [至尊紫钻9级]金币≥2000个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

    升级  41.93%

    该用户从未签到

     等级: Rank: 3Rank: 3
     级别: 中级会员
     UID:  54   [未点亮普号显示]钻石不足100个
     威望:  304
     钻石:  0
     发贴: 451 (0)
     金币: 2200  
     同城币: 0   充值
     贡献:  0
     积分: 3258
     性别: I'm 火星人！
     阅读权限: 30
     在线时长: 0 小时
     注册:2011-10-22
     最后登录: 2012-5-18
    dantha68 发表于 2011-11-20 08:20:12 |显示全部楼层
    回个帖子支持一下！

    使用道具 举报

    
    [至尊红钻5级]发帖数量≥300篇 [至尊黄钻5级]威望≥300点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [至尊紫钻6级]金币≥500个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

    升级  66.13%

    该用户从未签到

     等级: Rank: 2
     级别: 注册会员
     UID:  116   [未点亮普号显示]钻石不足100个
     威望:  308
     钻石:  0
     发贴: 344 (0)
     金币: 534  
     同城币: 0   充值
     贡献:  0
     积分: 1492
     性别: I'm 火星人！
     阅读权限: 20
     在线时长: 0 小时
     注册:2011-11-2
     最后登录: 2012-5-16
    ccidc21973 发表于 2011-11-20 08:20:12 |显示全部楼层
    天啊.  

    使用道具 举报

    
    [至尊红钻6级]发帖数量≥400篇 [至尊黄钻5级]威望≥300点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [至尊紫钻9级]金币≥2000个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

    升级  41.93%

    该用户从未签到

     等级: Rank: 3Rank: 3
     级别: 中级会员
     UID:  54   [未点亮普号显示]钻石不足100个
     威望:  304
     钻石:  0
     发贴: 451 (0)
     金币: 2200  
     同城币: 0   充值
     贡献:  0
     积分: 3258
     性别: I'm 火星人！
     阅读权限: 30
     在线时长: 0 小时
     注册:2011-10-22
     最后登录: 2012-5-18
    dantha68 发表于 2011-11-20 08:20:12 |显示全部楼层
    必须顶  

    使用道具 举报

    
    [至尊红钻5级]发帖数量≥300篇 [至尊黄钻4级]威望≥100点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [至尊紫钻8级]金币≥1000个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

    升级  1.73%

    该用户从未签到

     等级: Rank: 3Rank: 3
     级别: 中级会员
     UID:  56   [未点亮普号显示]钻石不足100个
     威望:  256
     钻石:  0
     发贴: 357 (0)
     金币: 1184  
     同城币: 0   充值
     贡献:  0
     积分: 2052
     性别: I'm 火星人！
     阅读权限: 30
     在线时长: 0 小时
     注册:2011-10-23
     最后登录: 2012-5-15
    lexiang8896 发表于 2011-11-29 11:24:30 |显示全部楼层
    (*^__^*) 嘻嘻……   

    使用道具 举报

    
    [至尊红钻1级]发帖数量≥10篇 [至尊黄钻2级]威望≥20点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [未点亮至尊紫钻]金币不足10个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

    升级  14.2%

    该用户从未签到

     等级: Rank: 1
     级别: 新手上路
     UID:  567   [未点亮普号显示]钻石不足100个
     威望:  24
     钻石:  0
     发贴: 24 (0)
     金币: 0  
     同城币: 0   充值
     贡献:  0
     积分: 71
     性别: I'm 火星人！
     阅读权限: 10
     在线时长: 0 小时
     注册:2012-4-17
     最后登录: 2012-5-16
    qbwtools1H 发表于 2012-4-24 12:13:22 |显示全部楼层
    谢谢分享  

    使用道具 举报

    
    [至尊红钻1级]发帖数量≥10篇 [至尊黄钻1级]威望≥10点 [未点亮至尊蓝钻]在线时间不足2小时 [未点亮至尊绿钻]贡献度不足10点 [未点亮至尊紫钻]金币不足10个 [未点亮至尊粉钻]精华贴数不足5贴 [未点亮至尊黑钻]同城币不足8个

    升级  8.2%

    该用户从未签到

     等级: Rank: 1
     级别: 新手上路
     UID:  771   [未点亮普号显示]钻石不足100个
     威望:  11
     钻石:  0
     发贴: 11 (0)
     金币: 9  
     同城币: 0   充值
     贡献:  0
     积分: 41
     性别: I'm 火星人！
     阅读权限: 10
     在线时长: 0 小时
     注册:2012-4-18
     最后登录: 2012-5-18
    hfad5994 发表于 2012-4-24 12:13:22 |显示全部楼层
    写得好啊　估计有马甲  

    使用道具 举报

    返回列表 发新帖
    主题浏览脚印 ( 共有 0 位会员浏览过该帖 )
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册 人人连接登陆

    我的应用
    日志
    相册
    分享
    记录
    群组
    在线好友(0)
    提醒
    消息
    回顶部

    GMT+8, 2012-5-20 15:59 , Processed in 0.382528 second(s), 64 queries .

    Archiver|手机版|鼎鼎新网 ( 闽ICP备11017807号-1 )    鼎鼎新闻-ddxw.net腾讯QQ网页在线客服

    Powered by DDXW.NET! X2

    © 2001-2011 DDXW Inc. l=

    回顶部