jQuery编辑表视图样式

首先我们准备HTML和CSS,按钮和风格样式的对象。
<span class="trigger-italic">italic</span>
<span class="trigger-strong">strong</span>
<span class="trigger-underline">underline</span>
span {
 display: inline-block;
 width: 23px;
 height: 23px;
 text-indent: -9999%;
 cursor: pointer
}
  
span:hover {
 background-position: bottom left;
}
  
.trigger-strong {
 background: url('images/bold.png') top left;
}
  
.trigger-italic {
 background: url('images/italic.png') top left;
}
  
.trigger-underline {
 background: url('images/underline.png') top left;
}
  
.trigger-background-selected{
 background: url('images/background.png') top left;
}
  
.trigger-italic-selected {
 background: url('images/italic.png') top left;
}
  
.trigger-center-selected {
 background: url('images/center.png') top left;
}
上面的脚本将创建一个按钮,一些样式(*风格)我们将添加或删除的对象。现在我们添加一个功能按钮。
$('.trigger-italic, .trigger-strong, .trigger-underline').toggle(function() {
  
 className = $(this).attr('class')+'-style';
  
 $('td').addClass(className);
 $(this).addClass('selected');
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
  
 $('td').removeClass(className);
  
});
首先,我们添加一个按钮切换函数,这将使一个按钮可以选择,没有选择。
如果按钮被选中,我们将创建一个基于按钮类的类名(我们只添加“风格”文本类名)。
所以,如果按钮类的名字“trigger-italic”脚本将生成一个新的类名“trigger-italic-style”。
我们这类名称添加到每一个“td”我们(这代表“所有内容”),然后选中的类添加到按钮让它看起来选中。
$('.trigger-background-2, .trigger-right-2, .trigger-center-2').toggle(function() {
  
 className = $(this).attr('class')+'-style';
  
 $('tr td:nth-child(2)').addClass(className);
 $(this).addClass('selected');
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
  
 $('tr td:nth-child(2)').removeClass(className);
  
});
  
$('.trigger-background-23, .trigger-small-23, .trigger-big-23').toggle(function() {
  
 className = $(this).attr('class')+'-style';
  
 $('tr:nth-child(4)').children('td').addClass(className);
 $(this).addClass('selected');
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
  
 $('tr:nth-child(4)').children('td').removeClass(className);
  
});
最后是阅读用户定义的选择对象。
$('td').click(function() {
  
 thisIndex  = $(this).index() + 1;
 parentIndex = $(this).parents('tr').index() + 1;
  
 $.cookie('thisIndex', thisIndex);
 $.cookie('parentIndex', parentIndex);
  
 $(this).append('
<div class="td-selected">Content Was Selected</div>
');
 $('.td-selected').fadeOut(1000);
  
});
该脚本将定位对象通过阅读它的指数及其母公司指数在饼干,然后保存它告诉用户,他们有选择一个对象。我们将添加一个功能按钮,它可以找到所选对象。
$('.trigger-background-selected, .trigger-italic-selected, .trigger-center-selected').toggle(function() {
  
 className = $(this).attr('class')+'-style';
 cookieTR  = $.cookie('parentIndex');
 cookieTD  = $.cookie('thisIndex');
  
 if(cookieTD != null && cookieTR != null)  {
  $('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').addClass(className);
  $(this).addClass('selected');
 } else {
  alert('Choose a content on a table first');
 }
  
},function() {
  
 $(this).removeClass('selected');
  
 className = $(this).attr('class')+'-style';
 cookieTR  = $.cookie('parentIndex');
 cookieTD  = $.cookie('thisIndex');
  
 $('tr:nth-child('+cookieTR+')').children('td:nth-child('+cookieTD+')').removeClass(className);
  
});