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

时间：2022-12-08 15:56:07
源码:添加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="#" onclick="add_line();">添加一行</a>&nbsp;&nbsp; <a href="#" onclick="remove_line();">删除一行</a>&nbsp;&nbsp; <a href="#" onclick="up_exchange_line();">上移</a>&nbsp;&nbsp; <a href="#" onclick="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+"' onclick='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>
标签：

相关文章