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 language="javascript" src="js/jquery1.3.2.js">script>
head>
<body>
<a href="#" οnclick="add_line();">添加一行a>  
<a href="#" οnclick="remove_line();">删除一行a>  
<a href="#" οnclick="up_exchange_line();">上移a>  
<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(""+max_line_num+"打开网页"+max_line_num+"打开登录网页"+max_line_num+"删除  编辑");
    }

    //删除一行
    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>

你可能感兴趣的:(资料集)