<p>实用的jQuery表格样式(隔行换色和鼠标经过高亮并显示隐藏内容)</p><p>文章分类:XHTML相关</p><p></p><p>后台中经常会用到表格隔行换色、鼠标经过高亮显示当前行、鼠标经过显示该行的编辑和删除链接,相信童鞋们都用过这些效果,用jQuery实现这些效果灰常的简单:</p><p>一、隔行换色:</p><p>JavaScript代码</p><p>$(&quot;tr:odd&quot;).addClass(&quot;tr_bg&quot;); </p><p>就是说将表格的偶数行添加名为tr_bg的样式,当然,tr_bg的样式就是用来表示背景色的。</p><p>二、鼠标经过高亮显示当前行:</p><p>Java代码</p><pre class="brush:js;toolbar:false">$(&quot;tr&quot;).mouseover( function(){ $(this).addClass(&quot;tr_over&quot;); } ); $(&quot;tr&quot;).mouseout( function(){ $(this).removeClass(&quot;tr_over&quot;); } );</pre><p>鼠标经过时将该行添加名为tr_over的样式,鼠标移出时移除该样式。</p><p>三、鼠标经过显示该行的编辑和删除链接:</p><p>JavaScript代码</p><pre class="brush:js;toolbar:false">$(&quot;tr&quot;).mouseover( function(){ $(this).find(&quot;.p_none&quot;).show(); } ); $(&quot;tr&quot;).mouseout( function(){ $(this).find(&quot;.p_none&quot;).hide(); } );</pre><p><br/></p><p>原理和第二条一样。</p>
RangeTime:0.010878s
RangeMem:205.09 KB
返回顶部 留言