테이블 플러그인 포함 (hover 정렬 클릭) 효과
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> </title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
.tr-hover { background-color: #CCC; }
.tr-selected { background-color: #666; }
.tr-border { border: solid 1px #F00; }
</style>
</head>
<body>
<table width="500" border="1" cellpadding="0" cellspacing="0" id="table">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lupo</td>
<td>
<select name="">
<option value="1"> </option>
<option value="0"> </option>
</select>
</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>2</td>
<td>andy</td>
<td>
<select name="">
<option value="1"> </option>
<option value="0"> </option>
</select>
</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>3</td>
<td>lilian</td>
<td>
<select name="">
<option value="1"> </option>
<option value="0"> </option>
</select>
</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>4</td>
<td>jinker</td>
<td>
<select name="">
<option value="1"> </option>
<option value="0"> </option>
</select>
</td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
/**
* hover
*@auther
*@time 2013-01-21
*@encode UTF-8
*@param {boolen} hover hover true|false
*@param {boolen} selected selected true|false
*@param {boolen} rowMove true|false
*@example:
$("#table").initTable({
hover:true,
selected:false,
rowDrag:true,
rowMove:true
})
thead,tbody2
*/
(function ($) {
$.fn.extend({
initTable:function (o) {
//
var it = this,
hover = o.hover||false,
selected = o.selected||false,
rowDrag = o.rowDrag||false;
rowMove =rowDrag?false:(o.rowMove||false),
tbody = $(it).children("tbody"),
tr = $(it).children("tbody").children("tr");
//
it.undelegate();
//tr
if (hover) {
tbody.delegate("tr", "mouseenter", function () {
$(this).addClass("tr-hover");
}).delegate("tr", "mouseleave", function () {
$(this).removeClass("tr-hover");
})
}
//tr
if (selected) {
tbody.delegate("tr","click",function(e){
if(e.target.tagName.toLowerCase()=="td"){
tbody.children(".tr-selected").removeClass('tr-selected');
$(this).addClass('tr-selected');
}
})
}
//
if(rowMove){
var targetEl,mouseDown=false;
tbody.delegate("tr", "mousedown", function(e){
// td
if(e.target.tagName.toLowerCase() === "td"){
//
targetEl = this,mouseDown = true; console.log(this);
$(this).css("cursor","move");
return false;
}
}).delegate("tr", "mousemove", function(e){
//
if (mouseDown) {
//
if (targetEl != this) {
if ($(this).index()>$(targetEl).index()){
$($(this)).after(targetEl);
} else {
$($(this)).before(targetEl);
}
}
}
return false;
}).delegate("tr", "mouseup", function (e) {
$(tr).css("cursor","default");
targetEl = null;
})
// ,
it.delegate("tbody", "mouseleave", function (e) {
$(tr).css("cursor","default");
targetEl = null;
mouseDown = false;
})
}
}
})
})(jQuery)
$("#table").initTable({
hover:true,
selected:true,
rowMove:true
})
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Cognos 목록을 프롬프트에서 선택한 항목으로 오름차순 및 내림차순으로 정렬Cognos BI & Analytics에서 리스트의 정렬을 항목 지정 및 정렬 순서 지정으로 하고 싶을 때의 방법입니다. 정렬 항목 프롬프트에서 수량을 선택하고 정렬 순서 프롬프트에서 내림차순을 선택한 예입니다. 정...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
