zoukankan html css js c++ java

jquery table thead drop

 1 (function($){
 2     $.triggerDropTableThead=function(obj){
 3         var ths=$(obj).find("th");
 4         ths.unbind("ondrop");
 5         ths.bind("ondrop",function(){    
 6             var isDragging = false,
 7                 min_width=50;
 8             var _this=$(this)
 9                 .mousedown(function() {            
10                     isDragging=true;
11                     $(window).unbind("mouseup").unbind("mousemove");
12                     $(window).mouseup(function() {
13                         isDragging = false;
14                         $(window).unbind("mouseup").unbind("mousemove");
15                         //_this.unbind("mousemove");
16                     })
17                     .mousemove(function(e) {
18                         if(isDragging){
19                             //var x = e.pageX - this.offsetLeft;
20                             //var y = e.pageY - this.offsetTop;
21                             var x=e.pageX-_this.offset().left;
22                             if(x>=min_width){
23                                 _this.width(x);
24                                 //console.log(x,"mousemove");
25                             }                            
26                         }                        
27                     });
28                 });
29             
30         });
31         ths.trigger("ondrop");
32     }
33     $.dropTableThead=function(obj){
34         $.triggerDropTableThead(obj);
35     }    
36 })($);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
body,ul,ul,li,ol{
paddin:0;
margin:0;
}
table{
height:100%;
table-layout:fixed;
width:70%;
}
table th{
font-size:12px;
}
table td{
font-size:10px;
}
#left,#right{
    display:block;
    float:left;
    height:100%;
}
#left{
width:70%;
}

#view th,#view td{
background:#ccc;
border: solid green 1px; 
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
#view th:hover{
cursor:w-resize;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/dropTableThead.js"></script>
<script type="text/javascript">
//view 处理
window.onload=function(){
    for(var i =0;i<100;i++){
        do_something();
    }
    $.dropTableThead("#view thead");
}

function do_something(msg){

    var o={
        url:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    };    
    
    var html='<tr><td>{url}</td><td>{mehod}</td><td>{status}</td><td>{mimeType}</td><td>{bodySize}</td><td>{time}</td></tr>';
    html=html.replace(/\{(\w+)\}/gm,function(a,b){
        if(o[b]!=null)
            return o[b];
        return b;
    });
     
    $('#view tbody').append(html);        
}

</script>
</head>
<body>
<body>
<div id="left">
    <table id="view">    
        <thead><tr>
            <th width="280">url</th>
            <th width="80">mehod</th>
            <th width="70">status</th>
            <th width="130">type</th>
            <th width="80">size</th>
            <th width="100">time</th>
        </tr></thead>
        <tbody></tbody>
    </table>
</div>    
<div id="right">
    right
</div>    
</body>
</body>
</html>

查看全文

相关阅读:
CNN comprehension
Gradient Descent
Various Optimization Algorithms For Training Neural Network
gerrit workflow
jenkins job配置脚本化
 Jenkins pipeline jobs隐式传参
 make words counter for image with the help of paddlehub model
make words counter for image with the help of paddlehub model
git push and gerrit code review
image similarity

原文地址：https://www.cnblogs.com/solq/p/2848432.html