jQuery表格选中行变色插件

最新推荐文章于 2021-10-27 18:05:33 发布

原创最新推荐文章于 2021-10-27 18:05:33 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用jQuery实现表格中选中行背景色动态变化的功能，包括选中行背景色设置为预定义的颜色，并在点击其他行时切换回默认颜色。

$.fn.extend({
	  changecolor: function(options) {
		var defaults = {
			selectedColor: 'gainsboro' //选中后的颜色,默认淡灰色
		}; 
	    options = $.extend(defaults, options); 
	    return this.each(function() { 
	    	var $this = $(this);
	    	var $trs = $this.find('tr').filter(function(index){return index >= 1;});
	    	var selectedColor = options.selectedColor;
	    	$trs.each(function(i, tr){
	    		$(tr).bind('click', function(event){
	    			$trs.each(function(i, n) {
	    				if (n == tr) {
	    					$(n).css('background-color', selectedColor);
	    				} else {
	    					$(n).css('background-color', 'white');
	    				}
	    			});
	    		});
	    	});
	    });
	  }
});