韦德国际1946英国 > 计算机网络 > 如何用jquery控制表格奇偶行及活动行颜色,一个

原标题:如何用jquery控制表格奇偶行及活动行颜色,一个

浏览次数:104 时间:2019-09-11

再不怕页面代码了:

一、数据计划
<table id="table1">
<tr><th>小说标题</th><th>小说分类</th><th>宣布时间</th><th>操作</th></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
</table>
<table id="table2">
<tr><td>小说标题</td><td>小说分类</td><td>宣布时间</td><td>操作</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
</table>
<table id="table3">
<thead>
<tr><td>小说标题</td><td>小说分类</td><td>公布时间</td><td>操作</td></tr>
</thead>
<tbody>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
</tbody>
</table>
<table id="table4">
<thead>
<tr><td>小说标题</td><td>文章分类</td><td>公布时间</td><td>操作</td></tr>
</thead>
<tbody>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试3</td><td>测试</td><td>测试</td><td>测试</td></tr>
</tbody>
</table>
二、操作
<script type="text/javascript">
//1.鼠标移动行变色
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
$("#table2 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
//2.奇偶行区别颜色
$("#table3 tbody tr:odd").css("background-color", "#bbf");
$("#table3 tbody tr:even").css("background-color","#ffc");
$("#table3 tbody tr:odd").addClass("odd")
$("#table3 tbody tr:even").addClass("even")
//3.潜伏一行
$("#table3 tbody tr:eq(3)").hide();
//4.东躲安徽一列
$("#table5 tr td::nth-child(3)").hide();
$("#table5 tr").each(function(){$("td:eq(3)",this).hide()});
//5.删除一行
// 删除除第一行外的全体行
如何用jquery控制表格奇偶行及活动行颜色,一个JQuery操作Table的代码分享。$("#table6 tr:not(:first)").remove();
//6.删除一列
// 删除除第一列外的具有列
$("#table6 tr td:not(:nth-child(1))").remove();
//7.获取(设置)有个别单元格的值
//设置table7,第一个tr的第贰个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html("value");
//获取table7,第1个tr的第一个td的值。
$("#table7 tr:eq(1) td:nth-child(1)").html();
//8.插入一行:
//在其次个tr后插入一行
北京pk全天精准计划 ,$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
</script>

/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}

复制代码 代码如下:

复制代码 代码如下:

你恐怕感兴趣的篇章:

  • Jquery完毕的table最终一行加多样式的代码
  • JQuery动态给table添加、删除行 改进版
  • jQuery 选拔表格(table)里的行和列及改换轻易样式
  • jquery获取table中的某行全体td的内容措施
  • JQuery DataTable删除行后的页面更新利用Ajax解决
  • jquery sortable的拖动方法自己要作为典范遵守规则详解
  • jQuery操作表格(table)的常用方法、技术汇总
  • jquery easyui 结合jsp轻巧突显table数据示例
  • jquery对table中各数据的加码、保存、删除操作示例
  • Jquery 完毕table样式的设定

复制代码 代码如下:

先定义好表格的奇偶行样式,如下代码:

你可能感兴趣的篇章:

  • Extjs依据规范设置表格某行背景象示例
  • javascript修改表格背景观实例代码分享
  • 一种表格背景象渐变效果的贯彻
  • jquery css 设置table的奇偶行背景观示例
  • 表格奇偶行设置不相同颜色的中坚JS代码
  • 应用JQuery和JS达成奇偶行背景颜色自定义效果
  • jQuery完成表格奇偶行显示不一致背景象就这么轻松

设若无需鼠标事件,只需奇偶行差异色直接能够用CSS化解。

就算如此jquery流行已经相当多年了,一贯都认为很难,也从不花时间去读书它,只是有的时候何时心血来潮了去看一小点,时隔多日又会忘得一尘不到。目前用到表格奇偶行不相同色,不得不去再看jquery,纵然以为照旧难,但已经不像从前同样不能出手了。做完后只好来惊讶一下jquery真是太牛了,不用本人再写一大堆javascript函数去贯彻了,轻松几句轻便解决。

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:如何用jquery控制表格奇偶行及活动行颜色,一个

关键词: 伟德betvictor1

上一篇:伟德国际:JS执行删除前的判断代码,实例说明为

下一篇:没有了