Detailed explanation of jquery operation form examples (with code)

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>

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!