表格操作類(添加,刪除,排序,上移,下移)
系統
1849 0
http://www.cnblogs.com/zyh-nhy/archive/2007/08/14/855063.html
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html;charset=gb2312"
>
<
style
type
="text/css"
>
*
{
}
{
font-size
:
14px
}
button
{
}
{
margin
:
3px
}
</
style
>
<
script
type
="text/javascript"
>
var
mytable
=
null
,mytable2
=
null
;
window.onload
=
function
()
{
mytable
=
new
CTable(
"
tbl
"
,
10
);
mytable2
=
new
CTable(
"
tbl2
"
,
6
);
}
Array.prototype.each
=
function
(f)
{
for
(
var
i
=
0
;i
<
this
.length;i
++
)f(
this
[i],i,
this
)}
function
$A(arrayLike)
{
for
(
var
i
=
0
,ret
=
[];i
<
arrayLike.length;i
++
)ret.push(arrayLike[i]);
return
ret
}
Function.prototype.bind
=
function
()
{
var
__method
=
this
,args
=
$A(arguments),object
=
args.shift();
return
function
()
{
return
__method.apply(object,args.concat($A(arguments)));
}
}
function
CTable(id,rows)
{
this
.tbl
=
typeof
(id)
==
"
string
"
?
document.getElementById(id):id;
if
(rows
&&
/^
\d
+
$
/
.test(rows))
this
.addrows(rows)
}
CTable.prototype
=
{
addrows:
function
(n)
{
//
隨機添加n個tr
new
Array(n).each(
this
.add.bind(
this
))
}
,
add:
function
()
{
//
添加1個tr
var
self
=
this
;
var
tr
=
self.tbl.insertRow(
-
1
),td1
=
tr.insertCell(
-
1
),td2
=
tr.insertCell(
-
1
),td3
=
tr.insertCell(
-
1
);
var
chkbox
=
document.createElement(
"
INPUT
"
)
chkbox.type
=
"
checkbox
"
chkbox.onclick
=
self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute(
"
width
"
,
"
35
"
)
td2.innerHTML
=
Math.ceil(Math.random()
*
99
)
td3.innerHTML
=
Math.ceil(Math.random()
*
99
)
}
,
del:
function
()
{
//
刪除所選tr
var
self
=
this
$A(self.tbl.rows).each(
function
(tr)
{
if
(self.getChkBox(tr).checked)tr.parentNode.removeChild(tr)}
)
}
,
up:
function
()
{
//
上移所選tr
var
self
=
this
var
upOne
=
function
(tr)
{
//
上移1個tr
if
(tr.rowIndex
>
0
)
{
self.swapTr(tr,self.tbl.rows[tr.rowIndex
-
1
])
self.getChkBox(tr).checked
=
true
}
}
var
arr
=
$A(self.tbl.rows).reverse()
if
(arr.length
>
0
&&
self.getChkBox(arr[arr.length
-
1
]).checked)
{
for
(
var
i
=
arr.length
-
1
;i
>=
0
;i
--
)
{
if
(self.getChkBox(arr[i]).checked)
{
arr.pop()
}
else
{
break
}
}
}
arr.reverse().each(
function
(tr)
{
if
(self.getChkBox(tr).checked)upOne(tr)}
);
}
,
down:
function
()
{
var
self
=
this
var
downOne
=
function
(tr)
{
if
(tr.rowIndex
<
self.tbl.rows.length
-
1
)
{
self.swapTr(tr,self.tbl.rows[tr.rowIndex
+
1
]);
self.getChkBox(tr).checked
=
true
;
}
}
var
arr
=
$A(self.tbl.rows)
if
(arr.length
>
0
&&
self.getChkBox(arr[arr.length
-
1
]).checked)
{
for
(
var
i
=
arr.length
-
1
;i
>=
0
;i
--
)
{
if
(self.getChkBox(arr[i]).checked)
{
arr.pop()
}
else
{
break
}
}
}
arr.reverse().each(
function
(tr)
{
if
(self.getChkBox(tr).checked)downOne(tr)}
);
}
,
sort:
function
()
{
//
排序
var
self
=
this
,order
=
arguments[
0
];
var
sortBy
=
function
(a,b)
{
if
(
typeof
(order)
==
"
number
"
)
{
//
數字,則按數字指示的列排序
return
Number(a.cells[order].innerHTML)
>=
Number(b.cells[order].innerHTML)
?
1
:
-
1
;
//
轉化為數字類型比較大小
}
else
if
(
typeof
(order)
==
"
function
"
)
{
//
為程序,按程序的返回結果排序
return
order(a,b);
}
else
{
return
1
;
}
}
$A(self.tbl.rows).sort(sortBy).each(
function
(x)
{
var
checkStatus
=
self.getChkBox(x).checked;
self.tbl.firstChild.appendChild(x);
if
(checkStatus)self.getChkBox(x).checked
=
checkStatus;
}
);
}
,
rnd:
function
()
b
表格操作類(添加,刪除,排序,上移,下移)
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061
微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元