jquery操作表格實例詳解（附程式碼）-js教程-PHP中文網

jquery操作表格實例詳解（附程式碼）

php中世界最好的语言

發布： 2018-04-25 10:14:27

原創

1144 人瀏覽過

這次帶給大家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>

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！