ID |
选中 |
姓名 |
生日 |
备注 |
1 |
|
小三 |
1982-05-27 |
カップ具、すべてはカップ具 |
3 |
|
李四 |
1983-06-27 |
恩恩我魔兽技术不错 |
2 |
|
王五 |
1987-05-27 |
波斯王子時之刃还不错 |
4 |
|
赵六 |
1988-05-27 |
我叫赵六 |
5
| |
朱八 |
1984-05-27 |
洗洗睡吧 |
6 |
|
阿斯多夫 |
1984-06-27 |
阿斯多夫暗室逢灯 |
7 |
|
コップ具 |
1984-06-27 |
非常に多くのカップ器具 |
8 |
|
餐具 |
1984-02-27 |
非常に多くの餐具 |
8 |
|
洗浄具 |
1984-08-27 |
非常に多くの洗浄具 |
9 |
|
内牛满面 |
1984-12-27 |
10快一晚 |
10 |
|
犀利哥 |
1984-12-21 |
嘿嘿 |
<スクリプト言語="javascript">
(関数(ウィンドウ,未定義){
window.Sys = function (ua){
var b = {
例: /msie/.test(ua) && !/opera/.test(ua),
オペラ: /opera/.test(ua),
サファリ: /webkit/.test(ua) && !/chrome/.test(ua),
Firefox: /firefox/.test(ua),
クロム: /chrome/.test(ua)
},vMark = "";
for (var i in b) {
if (b[i]) { vMark = "サファリ" == i ? 「バージョン」:i;壊す; }
}
b.version = vMark && RegExp("(?:" vMark ")[\/: ]([\d.] )").test(ua) ? RegExp.$1 : "0";
b.ie6 = b.ie && parseInt(b.version, 10) == 6;
b.ie7 = b.ie && parseInt(b.version, 10) == 7;
b.ie8 = b.ie && parseInt(b.version, 10) == 8;
b を返します;
}(window.navigator.userAgent.toLowerCase());
window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);
window.$ = function(Id){
return document.getElementById(Id);
};
window.addListener = function(element,e,fn){
!element.events&&(element.events = {});
element.events[e]&&(element.events[e][addListener.guid ]=fn)||(element.events[e] = {'0':fn});
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" e,fn);
};
window.addListener.guid = 1;
window.removeListener = function(element,e,fn){
var handlers = element.events[e],type;
if(fn){
for(ハンドラーを入力)
if(ハンドラー[タイプ]===fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
ハンドラーを削除[タイプ];
}
}その他{
for(ハンドラーを入力){
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" e,handlers[type]);
ハンドラーを削除[タイプ];
}
}
};
window.setStyle = function(e,o){
if(typeof o=="string")
e.style.cssText=o;
それ以外
for(var i in o)
e.style[i] = o[i];
};
var スライス = Array.prototype.slice;
window.Bind = function(object, fun) {
var args = slide.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
window.BindAsEventListener = function(object, fun,args) {
var args = slide.call(arguments).slice(2);
戻り関数(イベント) {
return fun.apply(object, [event || window.event].concat(args));
}
};
//jQからコピー
window.Extend = function(){
var ターゲット = 引数[0] || {}、i = 1、長さ = argument.length、深さ = true、オプション;
if ( typeof target === "boolean" ) {
深い = ターゲット;
ターゲット = 引数[1] || {};
i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[オブジェクト関数]")
ターゲット = {};
for(;i
if ( (オプション = 引数[ i ]) != null )
for(オプションの変数名){
var src = ターゲット[名前]、コピー = オプション[名前];
if (ターゲット === コピー)
続行;
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
}
else if(コピー !== 未定義)
ターゲット[名前] = コピー;
}
}
リターンターゲット。
};
window.objPos = function(o){
var x = 0、y = 0;
do{x = o.offsetLeft;y = o.offsetTop;}while((o=o.offsetParent));
return {'x':x,'y':y};
}
window.Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, argument) : this;};
_class.prototype = プロパティ;
return _class;
};
window.hasClass = function(element, className){
return element.className.match(new RegExp('(\s|^)' className '(\s|$)'));
} ;
window.addClass = function(element, className) {
!this.hasClass(要素, クラス名)&&(要素.クラス名 = " " クラス名);
}
window.removeClass = function(element, className) {
hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\s|^)' className '(\s|$)'),' ')) ;
}
})(ウィンドウ);
var Table = 新しいクラス({
オプション:{
minWidth: 62
}、
初期化: function(tab,set){
This.table = tab;
This.rows = [] //すべての tr 参照を記録します
This.sortCol = null // どの列がソートされているかを記録します
This.inputtd = null //どの td が編集されているかを記録します
This.editconfig = {} //テーブル編集のルールとヒント
This.thead = tab.getElementsByTagName('thead')[0];
This.theadTds = tab.getElementsByTagName('thead')[0].getElementsByTagName('td') //一般的に使用される DOM コレクションは属性で参照できます
This.tbodyTds = tab.getElementsByTagName('tbody')[0].getElementsByTagName('td');
This.closConfig = {
オン: false、
totd : null
};
This.widthConfig = {
td : null、
nexttd : null,
x : 0、
tdwidth : 0,
nexttdwidth : 0
};
Extend(this,this.options);
//理由は分かりませんが、設定しないとランダムに飛んでしまいます
(Sys.ie6||Sys.chrome)&&(tab.width=tab.offsetWidth)
// これらのチェックボックスを記録し、ラジオが選択されている場合、ie6 は dom 操作を実行するときにこれらの状態を記憶しません
If(Sys.ie6){
This.checkbox = {};
var checkboxs = tab.getElementsByTagName('input'),i=0,l=checkboxs.length;
for(;i
(checkboxs[i].type=="checkbox"||checkboxs[i].type=="ラジオ")&&
addListener(checkboxs[i],"click",Bind(this,function(elm,i){
elm.checked==true?(this.checkbox[i] = elm):(this.checkbox[i] を削除);
},チェックボックス[i],i));
};
var i=0,l=set.length,rows =tab.tBodies[0].rows,d=document,tabTads=tab.getElementsByTagName('td'),length=this.theadTds.length;
//編集用の入力
This.input = d.createElement('input');
This.input.type = "テキスト";
This.input.className = '編集';
//ドラッグされている div を表示するために使用されます
This.div = d.body.appendChild(d.createElement('div'));
This.div.className ="div";
//ズーム時に縦線が表示される
This.line = d.body.appendChild(d.createElement('div'));
This.line.className = 'line';
This.line.style.top = objPos(tab).y "px";
// セットを調べていくつかの設定を行いますfor(;i
//ソートが必要なヘッドハンターにイベントをバインドします
addListener(this.theadTds[set[i].id],'click',Bind(this, this.sortTable, this.theadTds[set[i].id],set[i].type));
// 編集する必要があるテーブルの列に必要な構成を定義します
set[i].edit&&(this.editconfig[set[i].id]={rule:set[i].edit.rule,message:set[i].edit.message});
}
//ソートのためにすべての tr を配列に入れます
for( i=0,l=rows.length;i
This.rows[i]=rows[i];
//すべての TDS を走査し、いくつかの設定を行います
for( i=0,l=tabTads.length;i
// ドラッグするときに、先頭のすべての TDS をマークします。
i
//編集が必要なTDにedit属性を追加します
i>=length&&this.editconfig[i%length]&&tabTads[i].setAttribute('edit',i%length);
}
//ドラッグとズーム操作をバインドします
addListener(this.thead,'mousedown',BindAsEventListener(this,this.dragOrWidth));
//ドラッグすると、レコードは td
のその列に移動されます
addListener(this.thead,'mouseover',BindAsEventListener(this,this.theadHover));
//ああ、
addListener(this.thead,'mouseout',BindAsEventListener(this,this.theadOut));
//編集イベントをバインドし、e.srcElement または e.target に基づいてどのテーブルが編集されるかを決定します
addListener(tab,'dblclick',BindAsEventListener(this, this.edit));
//入力を終了するときに変更された内容を保存します
AddListener(this.input,'blur',Bind(this,this.save,this.input));
}、
SortTable :function(td,type){ //td はクリックされた要素、n は並べ替える列、type は並べ替えの種類
var frag=document.createDocumentFragment(),span=td.getElementsByTagName('span')[0],str=span.innerHTML;
If(td===this.sortCol){
This.rows.reverse();
span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ;
}その他{
This.rows.sort(this.compare(td.getAttribute('clos'),type));
span.innerHTML = span.innerHTML "↑";
this.sortCol!=null&&(this.sortCol.getElementsByTagName('span')[0].innerHTML = this.sortCol.getElementsByTagName('span')[0].innerHTML.replace(/.$/,'')) ;//前の列の並べ替えマークを削除
};
for(var i=0,l=this.rows.length;i
frag.appendChild(this.rows[i]);
This.table.tBodies[0].appendChild(frag);
If(Sys.ie6){
for(this.checkbox の変数)
this.checkbox[s].checked = true;
}
this.sortCol = td; //记录哪一列正在排序中
}、
比較:function(n,type){
戻り関数 (a1,a2){
var 変換 ={
int : function(v){return parseInt(v)},
float : function(v){return parseFloat(v)},
日付 : function(v){return v.toString()},
文字列: function(v){return v.toString()}
};
!convert[type]&&(convert[type]=function(v){return v.toString()});
a1 =convert[type](a1.cells[n].innerHTML);
a2 =convert[type](a2.cells[n].innerHTML);
a1==a2?0:a1
};
}、
編集: function(e){
var elem = this.inputtd=e.srcElement || e.target;
if(!elem.getAttribute('edit'))return;
this.input.value = elem.innerHTML;
elem.innerHTML = "";
elem.appendChild(this.input);
this.input.focus();
}、
保存: function(elem){
var editinfo=this.editconfig[elem.parentNode.getAttribute('edit')],status={
"[オブジェクト関数]" : editinfo.rule&&editinfo.rule(this.input.value) の 'length'||false,
"[オブジェクト RegExp]" : editinfo.rule&&editinfo.rule.test(this.input.value)||false
の 'test'
}[Object.prototype.toString.call(editinfo.rule)],_self=this;
//如果不一致条件修正提案情報
typeof status != "boolean"&&(editinfo.message = status);
if(ステータス===true){
this.inputtd.innerHTML = this.input.value;
this.inputtd=null;
}その他{
アラート(editinfo.message);
//firefox下 直接使用input.focus()不会実行可能 setTimeout使用可能
setTimeout(function(){_self.input.focus()},0);
}
}、
theadHover : function(e){
var elem = e.srcElement || e.target;
if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on){
this.closConfig.totd = elem.getAttribute('clos');
!hasClass(elem,'thover')&&addClass(elem,'thover');
}
}、
theadOut : function(e){
var elem = e.srcElement || e.target;
if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on)removeClass(elem,'thover')
}、
ragOrWidth : function(e){
var elem = e.srcElement || e.target,widthConfig=this.widthConfig;
//执行拖拽
if(elem.nodeName.toLowerCase()==='td'){
this.closConfig.td = elem.getAttribute('clos');
addListener(document,'mousemove',BindAsEventListener(this,this.dragMove));
addListener(document,'mouseup',Bind(this,this.dragUp));
this.closConfig.on = true;
Sys.ie?this.thead.setCapture(false):e.preventDefault();
}
//执行宽度缩放
if(elem.nodeName.toLowerCase()==='div'){
Sys.ie?(e.cancelBubble=true):e.stopPropagation();
//結果が最後の td エリアの div は解放されません
if(this.theadTds[this.theadTds.length-1]===elem.parentNode)return
Sys.ie?this.thead.setCapture(false):e.preventDefault();
widthConfig.x = e.clientX;
widthConfig.td = elem.parentNode;
widthConfig.nexttd = widthConfig.td.nextSibling;
while(widthConfig.nexttd.nodeName.toLowerCase()!="td"){
widthConfig.nexttd = widthConfig.nexttd.nextSibling;
};
widthConfig.tdwidth = widthConfig.td.offsetWidth;
widthConfig.nexttdwidth = widthConfig.nexttd.offsetWidth;
this.line.style.height = this.table.offsetHeight "px";
addListener(document,'mousemove',BindAsEventListener(this,this.widthMove));
addListener(document,'mouseup',Bind(this,this.widthUp));
}
}、
ドラッグムーブ : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
setStyle(this.div,{display:"block",left:e.clientX 9 "px",top:e.clientY 20 "px"});
}、
ドラッグアップ:function(){
var closConfig = this.closConfig,rows = this.table.getElementsByTagName('tr'),td,n,o,i=0,l=rows.length;
this.div.style.display = "なし";
RemoveListener(document,'mousemove');
RemoveListener(document,'mouseup');
Sys.ie&&this.thead.releaseCapture();
closConfig.on = false;
if(closConfig.totd===null)return;
RemoveClass(this.theadTds[closConfig.totd],'thover');
//同一列不进列替换
if(closConfig.td === closConfig.totd)return;
//进列置換换如果
if(closConfig.td*1 1===closConfig.totd*1){
n = closConfig.totd;
o = closConfig.td;
}その他{
n = closConfig.td;
o = closConfig.totd;
}
for(;i
td = rows[i].getElementsByTagName('td');
rows[i].insertBefore(td[n],td[o]);
}
// 重新标识表头
for(i=0,l=this.theadTds.length;i
this.theadTds[i].setAttribute('clos',i);
closConfig.totd=closConfig.td=null;
}、
widthMove : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var widthConfig = this.widthConfig,x = e.clientX - widthConfig.x,left = e.clientX,clientX=left;
if(clientXwidthConfig.tdwidth-this.minWidth){
left = widthConfig.x - widthConfig.tdwidth this.minWidth;
}
if(clientX>widthConfig.x&&clientX - widthConfig.x>widthConfig.nexttdwidth-this.minWidth){
left =widthConfig.x widthConfig.nexttdwidth-this.minWidth;
}
setStyle(this.line,{display:"block",left:left "px"});
}、
widthUp : function(){
this.line.style.display = "なし";
var widthConfig = this.widthConfig,x= parseInt(this.line.style.left) - widthConfig.x;
widthConfig.nexttd.style.width = widthConfig.nexttdwidth -x -1 'px';
widthConfig.td.style.width = widthConfig.tdwidth x -1 'px';
Sys.ie&&this.thead.releaseCapture();
RemoveListener(document,'mousemove');
RemoveListener(document,'mouseup');
}
});
window.onload = function(){
関数 checkName(val){
If(val.replace(/^s $/g,'')==='') return '名前入力を空にすることはできません';
If(val.replace(/^s |s $/,'').length>10) return '名前は 10 文字を超えることはできません';
If(!/^[u4e00-u9fa5a-z] $/i.test(val)) return '名前は中国語または文字でのみ入力できます';
true を返します;
};
関数 checkRemark(val){
if(val.replace(/^s $/g,'')===='') return 'コメント入力を空にすることはできません';
if(val.replace(/^s |s $/,'').length>15) return 'メモの長さは 15 文字を超えることはできません';
if(!/^[u4e00-u9fa5ws] $/i.test(val)) return '備考には中国語の数字、アンダースコア、スペースのみを入力できます';
true を返します;
}
var set = [
{id:0,type:"int"},
{id:2,type:"string",edit:{rule:checkName,message:''}},
{id:3,type:"date",edit:{rule:/^d{4}-d{2}-d{2}$/, message:"日付 1985-02-30 をこの形式で入力してください" }}、
{id:4,type:"string",edit:{rule:checkRemark,message:''}}
];
new Table($("tab"),set);
}
既知のバグ:
IE6 では中国語が自動的に折り返されません
Internet Explorer で実行していないときに文字と数字が自動的に折り返されないのは本当に迷惑です
Chrome ブラウザでクリックして実行すると大きな問題が発生するようです。ローカル テストを行った方がよいでしょう。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
