zoukankan      html  css  js  c++  java
  • jQuery 元素的选中, 置顶、上移、下移、置底、删除

    如截图:

      

    <ul>
    <li class="li01" onclick="C_columnSetTop(this)"><i></i>置顶</li>
    <li class="li02" onclick="C_columnSetMoveUp(this)"><i></i>上移</li>
    <li class="li03" onclick="C_columnSetMoveDown(this)"><i></i>下移</li>
    <li class="li04" onclick="C_columnSetBottom(this)"><i></i>置底</li>
    <li class="li05"><i></i>刷新</li>
    <li class="li06" onclick="C_columnSetDel(this)"><i></i>删除</li>
    </ul>
    <table>
    <thead>
    <tr>
    <th>列名</th>
    <th>是否显示</th>
    </tr>
    </thead>
    <tbody class="M_scrollBar">
    <tr>
    <td>客户状态1</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态2</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态3</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态4</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态5</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    <tr>
    <td>客户状态</td>
    <td><input type="checkbox" class="R_checkbox"><label></label></td>
    </tr>
    </tbody>
    </table>
    <script>
    //居中弹框(列设置)删除
    function C_columnSetDel(o){
    var obj = $(o).parent().next('table').find("tbody tr.P_current");
    if(obj.length > 0){
    obj.hide();
    }else {
    win.alert('系统提示', '请选择要【删除】的列!');
    }
    }

    //居中弹框(列设置)置底
    function C_columnSetBottom(o){
    var obj = $(o).parent().next('table').find("tbody tr.P_current");
    var list = $(o).parent().next('table').find("tbody tr");
    if(obj.length > 0){
    var thisLocation = list.index( obj );
    if( thisLocation >= list.length - 1 ){
    win.alert('系统提示', '已移到最底端了!');
    }else {
    //console.log (thisLocation);
    obj.parent().append(obj); //移动到最底
    }
    //console.log (list.length);
    }else {
    win.alert('系统提示', '请选择要【置底】的列!');
    }
    }
    //居中弹框(列设置)下移动
    function C_columnSetMoveDown(o){
    var obj = $(o).parent().next('table').find("tbody tr.P_current");
    var list = $(o).parent().next('table').find("tbody tr");
    if(obj.length > 0){
    var thisLocation = list.index( obj );
    if( thisLocation >= list.length - 1 ){
    win.alert('系统提示', '已移到最底端了!');
    }else {
    //console.log (thisLocation);
    obj.next().after(obj); //下移动
    }
    //console.log (list.length);
    }else {
    win.alert('系统提示', '请选择要【下移】的列!');
    }
    }

    //居中弹框(列设置)置顶
    function C_columnSetTop(o){
    var obj = $(o).parent().next('table').find("tbody tr.P_current");
    var list = $(o).parent().next('table').find("tbody tr");
    if(obj.length > 0){
    var thisLocation = list.index( obj );
    if( thisLocation < 1 ){
    win.alert('系统提示', '已移到最顶端了!');
    }else {
    console.log (thisLocation);
    obj.parent().prepend(obj); //移动到最顶
    }
    }else {
    win.alert('系统提示', '请选择要【置顶】的列!');
    }
    }
    //居中弹框(列设置)上移动
    function C_columnSetMoveUp(o){
    var obj = $(o).parent().next('table').find("tbody tr.P_current");
    var list = $(o).parent().next('table').find("tbody tr");
    if(obj.length > 0){
    var thisLocation = list.index( obj );
    if( thisLocation < 1 ){
    win.alert('系统提示', '已移到最顶端了!');
    }else {
    //console.log (thisLocation);
    obj.prev().before(obj); //上移动
    }
    //console.log (list.length);
    }else {
    win.alert('系统提示', '请选择要【上移】的列!');
    }
    }

    /*客户,列设置*/
    $(function(){
    $("#C_columnSetList table tbody tr").on('click', function() {
    if($(this).hasClass("P_current")){
    $(this).removeClass("P_current");
    }else {
    $(this).addClass("P_current").siblings().removeClass("P_current");
    }
    });
    });


    </script>
  • 相关阅读:
    2016.8.16上午纪中初中部NOIP普及组比赛
    Laravel之Eloquent ORM
    Laravel基础
    sql
    PHP面向对象编程
    PHP判断远程文件是否存在
    专业术语之------耦合?依赖?耦合和依赖的关系?耦合就是依赖
    门禁系统socket通讯编程
    PHP设计模式:类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置
    PHP 真正多线程的使用
  • 原文地址:https://www.cnblogs.com/xiangsj/p/5884808.html
Copyright © 2011-2022 走看看