js操作动态table

2018-02-27 11:00:16来源:http://alfx.iteye.com作者:sky繁星人点击

分享

在项目中遇到对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("<tr id='line" + max_line_num + "' onclick='lineclick(this);'><td style='text-align:center;display:table-cell;vertical-align:inherit; padding:6px !important;height:26px; width:22% ' >" + max_line_num + "</td><td style='text-align:center;display:table-cell;vertical-align:inherit;padding:6px !important;height: 26px;width:33% ' >" + key + "</td><td style='text-align:center;display:table-cell;vertical-align:inherit;padding:6px !important;height:26px;width:45% ' >" + value + "</td></tr>");    }    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值:<input type="text"  /><br/><br/>value值&nbsp;&nbsp;:<input type="text"  />',            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值:<input type="text"  /><br/><br/>value值&nbsp;&nbsp;:<input type="text"  />',            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代码:

<table>      <thead>          <tr >           <th colspan="3">                 <a  href="JavaScript:void(0);"background-color: #0000cc"><span  title="添加单个" onclick="inputContent();">+</span></a>                 <a  href="JavaScript:void(0);" background-color: #0000cc"><span  title="向上移动" onclick="up_exchange_line();">↑</span></a>                 <a  href="JavaScript:void(0);" background-color: #0000cc"><span  title="向下移动" onclick="down_exchange_line();">↓</span></a>                 <a  href="JavaScript:void(0);" background-color: #0000cc"><span  title="修改某行" onclick="updateContent();">✎</span></a>                 <a  href="JavaScript:void(0);" background-color: #0000cc"><span  title="删除选中" onclick="remove_line();">×</span></a>              </th>           </tr>       </thead>      <tbody>             <tr>                 <td>序号</td>                 <td>键(key)</td>                 <td>值(value)</td>            </tr>      </tbody>  </table>  <table >    </table>  

 

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台