Explication détaillée des exemples de formulaires d'opération jquery (avec code)

Cette fois, je vais vous apporter une explication détaillée de l'exemple de formulaire d'opération jquery (avec code). Quelles sont les précautions pour le formulaire d'opération jquery Ce qui suit est un cas pratique, jetons un coup d'œil. .

Récemment, j'ai besoin d'utiliser des tableaux lors de la création d'objets. Les actions utilisées incluent : ajouter une ligne de données, supprimer une ligne de données et déplacer les données de haut en bas. beaucoup sur Internet, mais cela ne pouvait pas satisfaire pleinement mes besoins. J'y ai pensé moi-même et j'ai trouvé ce truc

. Le code est très simple, dans la pièce jointe, vous pouvez le télécharger directement Exécuter.

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention à. d'autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des tables de données du plug-in de table jQuery

Explication détaillée de JSON. parse() et JSON.stringify( ) et comment les utiliser

Quelles sont les façons d'analyser Json

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!