집 > 기사 > 웹 프론트엔드 > Jquery 연산 양식 예제에 대한 자세한 설명(코드 포함)

Jquery 연산 양식 예제에 대한 자세한 설명(코드 포함)

php中世界最好的语言원래의: 2018-04-25 10:14:271189검색

이번에는 jquery 연산 폼 예제(코드 포함)에 대해 자세히 설명하겠습니다. jquery 연산 폼의 주의 사항은 무엇인가요? 다음은 실제 사례입니다.

최근 물건을 만들 때, 데이터 행 추가, 삭제, 데이터 위아래로 이동 등의 작업을 수행해야 하는데 인터넷에서 많이 찾았습니다. 제 요구사항을 완벽히 충족시키지 못해서 직접 고민해서 만들어봤습니다

코드는 아주 간단해서 첨부파일에서 다운받아서 바로 실행하시면 됩니다

<script type="text/
javascript
" language="javascript"> 
$(function() { 
jQuery.fn.alternateRowColors = function() { //做成插件的形式 
$(&#39;tbody tr:odd&#39;, this).removeClass(&#39;even&#39;).addClass(&#39;odd&#39;); //隔行变色 奇数行 
$(&#39;tbody tr:even&#39;, this).removeClass(&#39;odd&#39;).addClass(&#39;even&#39;); //隔行变色 偶数行 
return this; 
}; 
$(&#39;table.myTable&#39;).each(function() { 
var $table = $(this); //将table存储为一个jquery对象 
$table.alternateRowColors($table); //在排序时隔行变色 
$(&#39;th&#39;, $table).each(function(column) { 
var findSortKey; 
if ($(this).is(&#39;.sort-alpha&#39;)) { //按字母排序 
findSortKey = function($cell) { 
return $cell.find(&#39;sort-key&#39;).text().toUpperCase() + &#39;&#39; + $cell.text().toUpperCase(); 
}; 
} else if ($(this).is(&#39;.sort-numeric&#39;)) { //按数字排序 
findSortKey = function($cell) { 
var key = parseFloat($cell.text().replace(/^[^\d.]*/, &#39;&#39;)); 
return isNaN(key) ? 0 : key; 
}; 
} else if ($(this).is(&#39;.sort-date&#39;)) { //按日期排序 
findSortKey = function($cell) { 
return Date.parse(&#39;1 &#39; + $cell.text()); 
}; 
} 
if (findSortKey) { 
$(this).addClass(&#39;clickable&#39;).hover(function() { $(this).addClass(&#39;hover&#39;); }, function() { $(this).removeClass(&#39;hover&#39;); }).click(function() { 
//反向排序状态声明 
var newDirection = 1; 
if ($(this).is(&#39;.sorted-asc&#39;)) { 
newDirection = -1; 
} 
var rows = $table.find(&#39;tbody>tr&#39;).get(); //将数据行转换为数组 
$.each(rows, function(index, row) { 
row.sortKey = findSortKey($(row).children(&#39;td&#39;).eq(column)); 
}); 
rows.sort(function(a, b) { 
if (a.sortKey < b.sortKey) return -newDirection; 
if (a.sortKey > b.sortKey) return newDirection; 
return 0; 
}); 
$.each(rows, function(index, row) { 
$table.children(&#39;tbody&#39;).append(row); 
row.sortKey = null; 
}); 
$table.find(&#39;th&#39;).removeClass(&#39;sorted-asc&#39;).removeClass(&#39;sorted-desc&#39;); 
var $sortHead = $table.find(&#39;th&#39;).filter(&#39;:nth-child(&#39; + (column + 1) + &#39;)&#39;); 
//实现反向排序 
if (newDirection == 1) { 
$sortHead.addClass(&#39;sorted-asc&#39;); 
} else { 
$sortHead.addClass(&#39;sorted-desc&#39;); 
} 
//调用隔行变色的函数 
$table.alternateRowColors($table); 
//移除已排序的列的样式,添加样式到当前列 
$table.find(&#39;td&#39;).removeClass(&#39;sorted&#39;).filter(&#39;:nth-child(&#39; + (column + 1) + &#39;)&#39;).addClass(&#39;sorted&#39;); 
$table.trigger(&#39;repaginate&#39;); 
}); 
} 
}); 
}); 
}); 
//分页 
$(function() { 
$(&#39;table.paginated&#39;).each(function() { 
var currentPage = 0; 
var numPerPage = 10; 
var $table = $(this); 
$table.bind(&#39;repaginate&#39;, function() { 
$table.find(&#39;tbody tr&#39;).hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
}); 
var numRows = $table.find(&#39;tbody tr&#39;).length; 
var numPages = Math.ceil(numRows / numPerPage); 
var $pager = $(&#39;<p class="pager"></p>&#39;); 
for (var page = 0; page < numPages; page++) { 
$(&#39;<span class="page-number"></span>&#39;).text(page + 1) 
.bind(&#39;click&#39;, { newPage: page }, function(event) { 
currentPage = event.data[&#39;newPage&#39;]; 
$table.trigger(&#39;repaginate&#39;); 
$(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;); 
}).appendTo($pager).addClass(&#39;clickable&#39;); 
} 
$pager.insertBefore($table); 
$table.trigger(&#39;repaginate&#39;); 
$pager.find(&#39;span.page-number:first&#39;).addClass(&#39;active&#39;); 
}); 
}); 
</script>

I 이 기사의 사례를 읽은 후 방법을 마스터했다고 믿으십시오. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 기타 관련 기사를 주목하세요!