jQuery表格操作添加行、删除行和动态移动

最新推荐文章于 2019-01-18 11:10:44 发布

mini_jike

最新推荐文章于 2019-01-18 11:10:44 发布

阅读量4.4k

点赞数

分类专栏：资料集文章标签： jquery 脚本移动源码

资料集专栏收录该内容

5 篇文章 0 订阅

订阅专栏

源码:添加jquery1.3.2.js既可以使用http://download.csdn.net/detail/mini_jike/9477374(脚本下载地址)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery表格操作添加行、删除行和动态移动丨芯晴网页特效</title>
    <script language="javascript" src="js/jquery1.3.2.js"></script>
</head>
<body>
<a href="#" οnclick="add_line();">添加一行</a>&nbsp;&nbsp;
<a href="#" οnclick="remove_line();">删除一行</a>&nbsp;&nbsp;
<a href="#" οnclick="up_exchange_line();">上移</a>&nbsp;&nbsp;
<a href="#" οnclick="down_exchange_line();">下移</a>
<table>
    <tr>
        <td>序号</td>
        <td>步骤名称</td>
        <td>步骤描述</td>
        <td>相关操作</td>
    </tr>
</table>
<table id="content"></table>


<script language="javascript">
    var currentStep=0;
    var max_line_num=0;
    //添加一行
    function add_line(){
        max_line_num=$("#content tr:last-child").children("td").html();
        if(max_line_num==null) {
            max_line_num=1;
        }
        else{
            max_line_num=parseInt(max_line_num);
            max_line_num+=1;
        }
        $('#content').append("<tr id='line"+max_line_num+"' οnclick='lineclick(this);'><td>"+max_line_num+"</td><td>打开网页"+max_line_num+"</td><td>打开登录网页"+max_line_num+"</td><td>删除&nbsp;&nbsp;编辑</td></tr>");
    }

    //删除一行
    function remove_line(){
        $("#content tr").each(
                function(){
                    var seq=parseInt($(this).children("td").html());
                    if(seq==currentStep) $(this).remove();
                    if(seq>currentStep) $(this).children("td").each(function(i){if(i==0)$(this).html(seq-1);});
                }
        );
        currentStep=0;
    }
    //上移
    function up_exchange_line(){
        if(currentStep==0){
            alert('请选择一项!');
            return false;
        }
        if(currentStep<=1){
            alert('非法操作!');
            return false;
        }
        var upStep=currentStep-1;
        //修改序号
        $('#line'+upStep+" td:first-child").html(currentStep);
        $('#line'+currentStep+" td:first-child").html(upStep);
        //取得两行的内容
        var upContent=$('#line'+upStep).html();
        var currentContent=$('#line'+currentStep).html();
        $('#line'+upStep).html(currentContent);
        //交换当前行与上一行内容
        $('#line'+currentStep).html(upContent);
        $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
        $('#line'+upStep).css("background-color","yellow");
        currentStep=upStep;
    }
    //下移
    function down_exchange_line(){
        if(currentStep==0){
            alert('请选择一项!');
            return false;
        }
        if(currentStep>=max_line_num){
            alert('非法操作!');
            return false;
        }
        var nextStep=parseInt(currentStep)+1;
        //修改序号
        $('#line'+nextStep+" td:first-child").html(currentStep);
        $('#line'+currentStep+" td:first-child").html(nextStep);
        //取得两行的内容
        var nextContent=$('#line'+nextStep).html();
        var currentContent=$('#line'+currentStep).html();
        $('#line'+nextStep).html(currentContent);
        //交换当前行与上一行内容
        $('#line'+currentStep).html(nextContent);
        $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
        $('#line'+nextStep).css("background-color","yellow");
        currentStep=nextStep;
    }

    function lineclick(line){
        $('#content tr').each(function(){$(this).css("background-color","#ffffff");});
        var seq=$(line).children("td").html();
        $(line).css("background-color","yellow");
        currentStep=seq;
    }
</script>
</body>
</html>

mini_jike

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
jQuery表格操作添加行、删除行和动态移动

源码:添加jquery1.3.2.js既可以使用http://download.csdn.net/detail/mini_jike/9477374(脚本下载地址)html>html lang="en">head> meta charset="UTF-8"> title>jQuery表格操作添加行、删除行和动态移动丨芯晴网页特效title> script langua
复制链接

扫一扫