js动态操作table

阅读更多

在项目中遇到对table中的数据进行动态调整，弹框修改/新增，并对选定某行移动且实时显示，所以对js进行二次探索，需引入jqurey.js、弹框使用layer.js就ok了

js代码如下:

    function add_line(key,value) {
        // var key = prompt('请输入列表后台value值，并确认');
        //var value = prompt('请输入列表显示值，并确认');
        var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\"\"\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
        if (pattern.test(key)) {
            layer.alert('包含非法字符!', {icon: 2});
            return false;
        }
        if (pattern.test(value)) {
            layer.alert('包含非法字符!', {icon: 2});
            return false;
        }
        if (key == null || value == null || key == "" || value == "") {
            layer.alert('请输入列表键值数据!', {icon: 2});
            return;
        }
        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 + "" + key + "" + value + "");
    }
    function remove_line() {
        if (currentStep == 0) {
            layer.alert('请选择数据!', {icon: 2});
            return false;
        }
        $("#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);
                    });
                    if(seq>currentStep){
                        $("#line"+seq).attr("id","line"+(seq-1));
                    }
                }
        );
        max_line_num=max_line_num-1;
        currentStep = 0;
    }

    function up_exchange_line() {
        if (currentStep == 0) {
            layer.alert('请选择数据!', {icon: 2});
            return false;
        }
        if (currentStep <= 1) {
            layer.alert('已至最顶行!', {icon: 2});
            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", " #7F9DB9");
        currentStep = upStep;
    }
    function down_exchange_line() {
        if (currentStep == 0) {
            layer.alert('请选择数据!', {icon: 2});
            return false;
        }
        if (currentStep >= max_line_num) {
            layer.alert('已至最底行!', {icon: 2});
            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", " #7F9DB9");
        currentStep = nextStep;
    }
    function lineclick(line) {
        $('#content tr').each(function () {
            $(this).css("background-color", "#ffffff");
        });
        $(line).children("td").css("background-colo", " #7F9DB9");
        var seq = $(line).children("td").html();
        $(line).css("background-color", " #7F9DB9");
        currentStep = seq;
    }
    //修改某行数据
    function update_exchange_line(key,value) {
        if (key == null || value == null || key == "" || value == "") {
            layer.alert('请输入列表键值数据!', {icon: 2});
            return;
        }
        var pattern = new RegExp("[`~!@#$^&*()=|{}':',\"\"\\[\\]<>/?~！@#￥……&*（）——|{}‘：”“'、？]");
        if (pattern.test(key)) {
            layer.alert('包含非法字符!', {icon: 2});
            return false;
        }
        if (pattern.test(value)) {
            layer.alert('包含非法字符!', {icon: 2});
            return false;
        }
        //修改序号td:nth-child(2)"
        $('#line' + currentStep + " td:nth-child(2)").html(key);
        $('#line' + currentStep + " td:nth-child(3)").html(value);
        $('#line' + currentStep).css("background-color", "#ffffff");
        currentStep = 0;
    }
    function updateContent(){
        if (currentStep == 0) {
            layer.alert('请选择数据!', {icon: 2});
            return false;
        }
        layer.open({
            title: '请输入列表key,value值,并确认!',
            content: 'key值:

value值  :',
            btn: ['确认', '取消'],
            yes: function(index, layero) {
                var key=layero.find(".key").val();
                var value=layero.find(".value").val();
                update_exchange_line(key,value);
                layer.close(index);
            },
            btn2: function(index, layero) {
                layer.close(index);
            },
            cancel: function(index, layero) {
                layer.close(index);
            }
        });

    }
    function inputContent(){
        layer.open({
            title: '请输入列表key,value值,并确认!',
            content: 'key值:

value值  :',
            btn: ['确认', '取消'],
            yes: function(index, layero) {
                var key=layero.find(".key").val();
                var value=layero.find(".value").val();
                add_line(key,value);
                layer.close(index);
            },
            btn2: function(index, layero) {
                layer.close(index);
            },
            cancel: function(index, layero) {
                layer.close(index);
            }
        });
    }

 html代码:

  
		    
  
		        
  
		         
  
		               ＋  
		               ↑  
		               ↓  
		               ✎  
		               ×  
		            
  
		         
  
		     
  
		    
  
		           
  
		               
序号
  
		               
键(key)
  
		               
值(value)