Jquery实现table 1.拖拽选中(支持滚动) 2.定位到指定行 3.查看选中的选项

最新推荐文章于 2024-01-11 13:14:42 发布
最新推荐文章于 2024-01-11 13:14:42 发布
阅读量1.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sugang666/article/details/84874576
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>table</title>
    <style type="text/css">
    .itemxuanzhong{background-color: red !important;}
    table{
        border-collapse: collapse;
    }
    table .xuanzhong{display:table-row}
    .dingdan_tr {display: none;}
    .disi{
        display: inline;
    }
    .juzhong{
        text-align: center;
    }
    .disb {
    display: block;
    }
    .scgdtbody {
    height: 270px;
    border: 1px solid #CCC;
    border-top: none;
}
    .scroolbar {
    overflow: scroll;
    overflow-x: hidden;
}
.trd tbody tr:nth-child(2n+1) {
    background-color: #EDF1EF;
}
.trd td {
    border: 1px solid #CCC;
    word-break: break-all;
}
    .btn{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-image: -webkit-linear-gradient(#F0F0F0, #F0F0F0 38%, #E0E0E0);
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
    color: #000;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 6px;
    /* width: 80px; */
    text-align: center;
    cursor: pointer;
}
    .input_text{
        box-shadow: 0px 0px 1px #8FE7D2;
        border: 1px solid #CCC;
        border-radius: 5px;
        font-size: 14px;
        width: 180px;
        height: 20px;
        line-height: 20px;
        color: #333;
        padding: 5px 6px;
        vertical-align: middle;
        outline: none;
        resize: none;
    }
</style>
</head>
<body>
    <div style="width:900px;margin:0px auto;">
     <h1 style="text-align: center;">功能性Table</h1>
        <div>
            <h3>功能选项</h3>
            1.<button class="btn" onclick="ischecked()">查看我选中的都有哪些</button><br /><br />
            2. <input  type="text" style="width:300px;" class="input_text" id="serach_name" placeholder="输入姓名，帮你定位到指定你要的行"  />
            <button class="btn" onclick="postion_obj()">定位</button><br /><br />
            3.拖拽选中,支持滚动拖拽选中;<br /><br />
        </div>
        <div id="time_indent">
        <table class="trd juzhong" style="width:854px;margin-top:10px;" >
            <thead class="disi">
                <tr style="height:25px;">
                    <td class="w158"><input type="checkbox" id="allCheck" onclick="checkAll(this)"></td> 
                    <td style="width:103px;">姓名</td>        
                    <td style="width:92px;">性别</td>
                    <td style="width:150px;">年龄</td>
                    <td style="width:100px;">居住地址</td>   
                    <td style="width:90px;">身高</td>  
                    <td style="width:90px;">体重</td>  
                    <td style="width:90px;">爱好</td>             
                    <td style="width:90px;">职业</td>
                </tr>
            </thead>
            <tbody class="disb scroolbar scgdtbody"  id="tb" style="height:400px;">
                   
            </tbody>
            </table>
            </div>
        </div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
window.onload=function(){
    var  tbody = document.getElementById("tb");
    var arr=[];
    for(var i=3;i<100;i++){
        if(i%3==0){
            arr.push({name:'小明',sex:"男",age:parseInt(i+15),address:'河北石家庄'+i+"号",height:parseInt(180+i),weight:parseInt(120+i),hobby:"打篮球",work:"后台开发"});
        }else if(i%3==1){
            arr.push({name:'小红',sex:"女",age:parseInt(i+15),address:'北京'+i+"号",height:parseInt(180+i),weight:parseInt(120+i),hobby:"睡觉",work:"前端开发"});
        }else{
            arr.push({name:'小刚',sex:"女",age:parseInt(i+15),address:'北京'+i+"号",height:parseInt(180+i),weight:parseInt(120+i),hobby:"吃饭",work:"数据库管理员"});
        }
    }
    var str=""
    for(var j=0;j<arr.length;j++){
        str+=`<tr id=${j}_change_gstatus onclick="select_indent(this,${j});" gid=${j} class='ant_design'><td class="w158"><input type="checkbox" titles="all_checkboxs" onclick="select_product(this);just_select($(this).parent().parent())" value=${j} /></td><td style="width:103px;">${arr[j].name}</td><td style="width:92px;">${arr[j].sex}</td><td style="width:150px;">${arr[j].age}</td><td style="width:100px;">${arr[j].address}</td><td style="width:90px;">${arr[j].height}</td><td style="width:90px;">${arr[j].weight}</td><td style="width:90px;">${arr[j].hobby}</td><td style="width:70px;">${arr[j].work}</td></tr>`

    }
    $(tbody).append(str);
    }
    //下面开始用jq
    //点击全选按钮
    function checkAll(obj){
        $('[titles=all_checkboxs]:checkbox').prop("checked",obj.checked);
    }
    //多选踩坑:对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 
    //jq版本问题,也是导致这个问题的关键所在
    
    //根据单选判断是否所有的全选了
     function select_product(obj){
    var $tmp=$('[titles=all_checkboxs]:checkbox');
    $("#allCheck").prop('checked',$tmp.length==$tmp.filter(':checked').length);
    event.stopPropagation(); //阻止事件传递  解决连续响应问题
    }   
    //查看选中状态
    function ischecked(){
        var vo_id="";
        $('[titles=all_checkboxs]:checkbox').filter(':checked').each(function(){
            vo_id+=$(this).val()+",";
        });
        //去除最后的逗号
       vo_id= vo_id.substr(0,vo_id.length-1);
        alert(vo_id);
    }

    function postion_obj(serach_name){
        var serach_name=$("#serach_name").val();
        var xz_obj=$("#tb").find(".itemxuanzhong");
        var i=-1;
        if(xz_obj.length!=0){
            var name=xz_obj.find("td:eq(1)").html();
            if(name==serach_name){
                i=xz_obj.index();
            }
        }
        var xzzz_obj=0;
        var jj=0
        $("#tb").find("tr").each(function(key,value){
            var name =$(this).find("td:eq(1)").html();
            console.info()
            console.info(name);
            if($(this).hasClass('ant_design')&&name==serach_name){
                if(xzzz_obj==0){
                    xzzz_obj=$(this);
                    jj++;
                }
            }
            if($(this).hasClass('ant_design')&&name==serach_name&&key>i){
                xzzz_obj=$(this);
                jj++;
                return false;
            }
        })
        if(jj==0){
            alert("对不起没有这个人");
            return false;
        }
         list_item_postion($("#tb"),xzzz_obj,'tr',1);
        just_select(xzzz_obj);
    }
    function list_item_postion(parent_e,self_e,e,number){
                var weizhi=self_e.index();
                var heigth=0;
                for(var i=0;i<weizhi;i++)
                {
                        heigth+=parent_e.find(""+e+":eq("+i+")").height();
                }
                heigth/=number;

                parent_e.scrollTop(heigth); 
        }
    function just_select(obj){
        $(obj).addClass("itemxuanzhong").siblings().removeClass("itemxuanzhong"); 
      }
     seletedTable($("#tb")[0],"tr",function(a){
            console.info($(a.getElementsByTagName('input')[0]).is(':checked'))
        if (!$(a.getElementsByTagName('input')[0]).is(':checked')){
            a.getElementsByTagName('input')[0].click();
        }else{
            a.getElementsByTagName('input')[0].click();
        }
    })
  //拖拽选中,加滚动条
  function seletedTable(box,markx ,callBack) { 
  box.onmousedown = function() { 
    var boxSocll = box.scrollTop;
    var selList = []; 
    var fileNodes = $(box).find(markx)
    for ( var i = 0; i < fileNodes.length; i++) { 
        selList.push(fileNodes[i]); 
    } 
    var isSelect = true; 
    var evt = window.event || arguments[0]; 
    var startX = (evt.x || evt.clientX); 
    var startY = (evt.y || evt.clientY)+boxSocll; 
    var selDiv = document.createElement("div"); 
    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#00D500;z-index:1000;filter:alpha(opacity:0);opacity:0;display:none;"; 
    selDiv.id = "selectDiv"; 
    document.body.appendChild(selDiv);
     var selDiv2 =  document.createElement("div"); 
     selDiv2.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; 
    document.body.appendChild(selDiv2); 
    selDiv.style.left = startX + "px"; 
    selDiv.style.top = (startY-boxSocll)+"px"; 
    var _x = null; 
    selDiv2.style.left = startX + "px"; 
    selDiv2.style.top = (startY-boxSocll)+"px"; 
    var _x = null; 
    var _y = null; 
    clearEventBubble(evt); 
    box.onmousemove = function() { 
      var boxSocll = box.scrollTop;
      evt = window.event || arguments[0]; 
      if (isSelect) { 
        if (selDiv2.style.display == "none") { 
          selDiv2.style.display = ""; 
        } 
        if (selDiv.style.display == "none") { 
          selDiv.style.display = ""; 
        } 
        _x = (evt.x || evt.clientX); 
        _y = (evt.y || evt.clientY);
       
        selDiv.style.left = Math.min(_x, startX) + "px";
        selDiv.style.top = Math.min(_y, (startY-boxSocll)) + "px"; 
        selDiv.style.width = Math.abs(_x - startX) + "px"; 
        selDiv.style.height = Math.abs(_y - startY+boxSocll) + "px"; 
        selDiv2.style.left =  Math.min(_x, startX) + "px";; 
        selDiv2.style.top = Math.max(Math.min(_y, (startY-boxSocll)),$(box).offset().top) + "px"; 
        selDiv2.style.width = selDiv.style.width; 
        selDiv2.style.height = Math.min( Math.abs(_y - startY+boxSocll),box.offsetHeight) + "px"; 
        if(Math.min(_y, (startY-boxSocll))<$(box).offset().top)
        {
          selDiv2.style.height = (Math.abs(_y - startY+boxSocll)- Math.abs(Math.min(_y, (startY-boxSocll))-Math.max(Math.min(_y, (startY-boxSocll)),$(box).offset().top))) + "px"; 
        }else{
          if(Math.min(_y, (startY-boxSocll))+ Math.abs(_y - startY+boxSocll)>box.offsetHeight){
            selDiv2.style.height =Math.min(Math.abs(_y - startY+boxSocll),( (box.offsetHeight+$(box).offset().top) -Math.max(Math.min(_y, (startY-boxSocll)),$(box).offset().top))) + "px"; 
          }
        }
      
        if((_y-$(box).offset().top)>(box.offsetHeight*0.9)){
          box.scrollTop+=10
          if((_y-$(box).offset().top)>(box.offsetHeight*0.91)){ 
             box.scrollTop+=10
          }  
            if((_y-$(box).offset().top)>(box.offsetHeight*0.92)){ 
             box.scrollTop+=20
          } 
            if((_y-$(box).offset().top)>(box.offsetHeight*0.95)){ 
             box.scrollTop+=30
          } 
           if((_y-$(box).offset().top)>(box.offsetHeight*0.98)){ 
             box.scrollTop+=100
          }
        }else{
          if((_y-$(box).offset().top)<(box.offsetHeight*0.5)){
            if(box.scrollTop>0){
              box.scrollTop-=10;
            if((_y-$(box).offset().top)<(box.offsetHeight*0.3)){
              box.scrollTop-=20; 
            }
            if((_y-$(box).offset().top)<(box.offsetHeight*0.2)){
              box.scrollTop-=50; 
            }
            if((_y-$(box).offset().top)<(box.offsetHeight*0.1)){
              box.scrollTop-=100; 
            }
            if((_y-$(box).offset().top)<(box.offsetHeight*0.05)){
              box.scrollTop-=200; 
            }
            if((_y-$(box).offset().top)<(box.offsetHeight*0.02)){
              box.scrollTop-=500; 
            }
          }
            if(box.scrollTop<0){
              box.scrollTop=0;
            }
            }
        }
 
        // ---------------- 关键算法 ---------------------  
        //var _l = selDiv.offsetLeft, _t = selDiv.offsetTop+boxSocll-$(box).offset().top; 
        var _l = $(selDiv).offset().left, _t = $(selDiv).offset().top; 
        var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; 
      
        for ( var i = 0; i < selList.length; i++) { 

          var sl = selList[i].offsetWidth + $(selList[i]).offset().left;//lList[i].offsetLeft; 
          var st = selList[i].offsetHeight +$(selList[i]).offset().top;// selList[i].offsetTop; 
      
          if (sl > _l && st > _t && $(selList[i]).offset().left < _l + _w && $(selList[i]).offset().top < _t + _h) { 
            if (selList[i].className.indexOf("selecting") == -1) { 
              $(selList[i]).addClass('selecting');
            } 
          } else { 
            if (selList[i].className.indexOf("selecting") != -1) { 
              $(selList[i]).removeClass('selecting');
            } 
          } 
        } 
  
      } 
      clearEventBubble(evt); 
    } 
    selDiv.onmousemove=box.onmousemove;
    selDiv2.onmousemove=box.onmousemove;
    document.onmouseup = function() { 
      isSelect = false; 
      if (selDiv) { 
        document.body.removeChild(selDiv); 
        document.body.removeChild(selDiv2); 
        showSelDiv(selList,callBack); 
      } 

      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null; 
    } 
  } 
}; 
 function clearEventBubble(evt) { 
    if (evt.stopPropagation) 
      evt.stopPropagation(); 
    else 
      evt.cancelBubble = true; 
    if (evt.preventDefault) 
      evt.preventDefault(); 
    else 
      evt.returnValue = false; 
  } 
  function showSelDiv(arr,callBack) { 
    var count = 0; 
    var selInfo = ""; 
    for ( var i = 0; i < arr.length; i++) { 
      if (arr[i].className.indexOf("selecting") != -1) { 
        if(callBack!=undefined){
          callBack(arr[i])
        }
        count++;
        selInfo +=(i+1)+"\n";
        $(arr[i]).removeClass('selecting') 
      } 
    } 
  } 
</script>

 

Xiao苏同学
关注
通过Power Platform自定义D365 CE 业务需求 - 3. 使用Microsoft Power Apps
Martin-Mei的博客
09-12 504
Power应用程序和无代码、无代码平台的概念详细使用Canvas应用程序适用于Power应用程序的PowerFX使用模型驱动的应用程序Power Portal的概念和部署设计管理Power Apps业务场景和实施Power Automate 概念Power Automate中的连接器Flow的使用和类型流中的动态值和表达式使用变量、循环和条件在Power Automate中处理审批业务场景、用例和实现。
前端学习.
qq_53323012的博客
11-15 920
基础班学习路线 html5基础，css3基础，h5c3提高，练习项目。 网页简介 1.html html指的是超文本标记语言，它是用来描述网页的一种语言。 html不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有层含义： 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超越链接文本） 2.网页 1.网站是指因特网上根据一定的规则，使用html等制作的用于展示特定内容相关的网页集合。 2.网页是网
table的拖拽选中区域(包含行合并和列合并的处理)
weixin_33724046的博客
07-23 957
最近碰到一个表格的增删问题，一个主要的问题在于需要用鼠标拖拽去选中区域，然后对选中的区域进行操作。在网上找了些代码，做了个总结。原理是在鼠标刚开始点击的点和鼠标移动的点，两个点之间生成一个矩形，然后用这个矩形去和表格中的td进行碰撞检测，但是因为是表格，当然会有行合并和列合并的问题。我的思路是使用递归函数，在每一次矩形和表格碰撞完之后，重新改变矩形的定位和宽高，然后再进行碰撞检测，直到达到某个条件...
jQuery 在表格内实现鼠标拖动选取格子
wangzunitian的博客
12-03 1156
通过监听mousedown，mouseup事件实现鼠标按住移动选取范围 <style type="text/css"> #fa { margin: 100px auto; } .td_change{ background-color:black; opacity:0.5; } </style> <body> <div id="fa">&l...
基于jQuery的可拖拽选择
weixin_30652271的博客
08-22 195
父级拖拽至右侧框即可全选其子节点子节点可单独拖拽添加右侧节点可拖拽回左侧窗口(暂时右侧无父节点，需求父节点不加入最后返回值故未考虑)生成对象的原始数据格式为json 这里是JSON格式 {id:'sjw',name:'市纪委、市两院',ind:'2',children:[{id:'{BFA811EA-0000-0000-4562-2C66000015FB}',name:'市纪委',gzna...
jquery实现鼠标拖拽选择
01-13
jquery实现鼠标拖拽，完整实现左右拖拽并且选择功能，如果感觉实用，请评论.谢谢！
jQuery实现table表格中行数据上下拖拽功能
wa_ka_ka的博客
07-09 1055
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({ cursor: "move", axis: "y", //只在y轴进行拖动 item: "tr", //拖动的对象 opacity: 0.5, //拖动时，透明度为0.5 revert: false, //释放时，增加动画 cancel: "tfoot,thead", //禁止表头和表末拖拽 update: function(event,u
tran.zip
02-23
在集成穿梭框到BootstrapTable时，我们面临的主要挑战是如何实现分页和查询。分页意味着数据不是一次性加载所有，而是按需加载。因此，穿梭框需要能处理部分数据，同时保持选中状态的一致性。这可能需要自定义插件或...
jQuery - 综合实例 - 固定表头，滚动表格内容
gdfjhc的博客
02-08 252
jQuery - 综合实例 - 固定表头，滚动表格内容
WEB 前端面试题 (高能)
m0_64191440的博客
11-11 1121
我们让原型对象等于另一个原型对象的实例,此时原型对象 ,将包含一个指向原型对象的指针，再让原型对象 的实例等于原型对象，如此层层递进就构成了实例和原型的链条，这就是原型链的概念。取得了另外一个值，则原先的引用值引用次数就减 1，当这个值的引用次 数为 0 的时候，说明没有办法再访问这个值了，因此就把所占的内存给。如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的。描述：给一个元素设置了高度和宽度的同时，还为其设置margin和padding的值，会改变该元素的实际大小。
【JavaScript源代码】jQuery实现表格行数据滚动效果.docx
12-30
jQuery实现表格行数据滚动效果 　　本文实例为大家分享了jQuery实现表格行数据滚动效果的具体代码，供大家参考，具体内容如下　　HTML代码：　　<div class="box">　　  <div class="box-header">　　    <div class="col">测试1</div>　　    <div class="col">测试2</div>　　    <div class="col">测试3</div>　　    <div class="col">测试4</div>　　  </div>　　  <div id="font-scroll">　　    <div clas
jquery实现table拖拽列效果
12-27
用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。
表格头拖动、表格内容是否能选中
熊诗言的博客
01-13 418
表格头拖动 table { border-collapse: collapse; } td { text-align: center; } (function ($){ $.fn.tableresize = function () { var _document = $("body"); $(this).each(function () { if (
jquery-能拖拽宽度的table
banyu0433的博客
03-13 334
控件官方地址：http://www.bacubacu.com/colresizable/?utm_source=jquer.in&utm_medium=website&utm_campaign=content-curation#samples 使用【colResizable】第三方插件 使用方法： <head> <script sr...
jquery 鼠标拖拽选择单元格一例
weixin_33882452的博客
09-02 946
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery实现表格行数据滚动效果
qq_41927979的博客
07-29 1154
啥也不说了，直接整代码 HTML代码： <div class="box"> <div class="box-header"> <div class="col">位置</div> <div class="col">温度(℃)</div> <div class="col">湿度(%RH)</div> <div class="col">状态</div>
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行。拖拽选择上下行数据。
最新发布
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
01-11 1438
【代码】基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行。
jQuery实现表格数据无限滚动
又偷懒了的博客
07-22 1056
jQuery实现表格数据无限滚动
jquery实战(一)——jquery实现table列表底部数据滚动
Garnett_zk的博客
12-11 978
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 jquery实现table的滚动系列文章目录目的实现方法1.HTML代码2.JS代码3.总结总结 目的 因为业务的需要，我们希望实现实现table底部数据滚动，如下图 实现方法 1.HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值