Home > Web Front-end > JS Tutorial > body text

Detailed explanation of jquery operation form examples (with code)

php中世界最好的语言
Release: 2018-04-25 10:14:27
Original
1200 people have browsed it

This time I will bring you a detailed explanation of the jquery operation form example (with code), what are the precautions for jquery operation form, the following is a practical case, let's take a look.

Recently, when making things, I need to operate tables. The actions used include: adding a row of data, Deleting a row of data, and moving data up and down. I found a lot on the Internet, but it couldn't fully satisfy my needs. According to the demand, I thought about it myself and came up with this stuff

The code is very simple. In the attachment, you can download it directly Run.

<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>
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of jQuery table plug-in datatables

Detailed explanation of JSON.parse() and JSON.stringify( ) and how to use it

What are the methods for parsing Json

The above is the detailed content of Detailed explanation of jquery operation form examples (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template