jQuery动态生成不规则表格,点击时变色的方法

一、需求:有这么一张表

本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法。分享给大家供大家参考,具体如下:

本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法。分享给大家供大家参考,具体如下:

图片 1

运行效果截图如下:

此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示。整体代码如下:

前四个属性当作联合主键

图片 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格隔行变色且鼠标滑过高亮显示</title>
<style>
table{border-collapse:collapse;border:none;width:20%;}
table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
.evenRow{background:#f0f0f0;}
.oddRow{background:#ff0;}
.activeRow{background:#f00;color:#fff;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
</head>
<body>
<script>
/*
* tableUI 0.1
* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
* Dependence jquery-1.7.1.js
*/ 
;(function($){
  $.fn.tableUI = function(options){ //经常用options表示有许多个参数 
  //各种属性、参数  创建一些默认值,拓展任何被提供的选项
  var defaults = {
    evenRowClass:"evenRow",
    oddRowClass:"oddRow",
    activeRowClass:"activeRow" 
    };
  var obj = $.extend(defaults,options);
  this.each(function(){ //this关键字代表了这个插件将要执行的jQuery对象  此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。  $(this)等同于 $($('#element'));
    //插件实现代码
    var thisTable = $(this); //获取当前对象  此时this关键字代表一个DOM元素  我们可以alert打印出此时的this代表的是object HTMLTableElement
    //添加奇偶行颜色
    $(thisTable).find("tr:even").addClass(obj.evenRowClass);
    $(thisTable).find("tr:odd").addClass(obj.oddRowClass);
    //添加活动行颜色
    $(thisTable).find("tr").mouseover(function(){
      $(this).addClass(obj.activeRowClass);
      });
    $(thisTable).find("tr").mouseout(function(){
      $(this).removeClass(obj.activeRowClass);
      });
    });
  };
})(jQuery);
//在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。
</script>
<table cellpadding="0" cellspacing="0">
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
  $("table").tableUI();
  })
</script>
</body>
</html>

需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行。类似这种:

具体代码如下:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

图片 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="jquery-1.7.2.min.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
//demo1:
//-隔行,滑动,点击 变色
$('.cssraindemo1 tbody tr:even').addClass('odd');
$('.cssraindemo1 tbody tr').hover(
 function() {$(this).addClass('highlight');},
 function() {$(this).removeClass('highlight');}
);
$('.cssraindemo1 tbody tr').click(
 function() {$(this).toggleClass('selected');}
);
//demo2:
$('.cssraindemo2 tbody tr:even').addClass('odd');
$('.cssraindemo2 tbody tr').hover(
 function() {$(this).addClass('highlight');},
 function() {$(this).removeClass('highlight');}
);
// 如果复选框默认情况下是选择的,变色.
$('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
// 复选框
$('.cssraindemo2 tbody tr').click(
 function() {
  if ($(this).hasClass('selected')) {
  $(this).removeClass('selected');
  $(this).find('input[type="checkbox"]').removeAttr('checked');
  } else {
  $(this).addClass('selected');
  $(this).find('input[type="checkbox"]').attr('checked','checked');
  }
 }
);
//demo3:
$('.cssraindemo3 tbody tr:even').addClass('odd');
$('.cssraindemo3 tbody tr').hover(
 function() {$(this).addClass('highlight');},
 function() {$(this).removeClass('highlight');}
);
// 如果单选框默认情况下是选择的,变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');
// 单选框
$('.cssraindemo3 tbody tr').click(
 function() {
  $(this).siblings().removeClass('selected');
  $(this).addClass('selected');
  $(this).find('input[type="radio"]').attr('checked','checked');
 }
);
});
//-->
</SCRIPT>
<style type="text/css">
h1  { font:bold 20px/26px Arial;}
table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th  { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}
</style>
<!-- demo1 -->
<h1>Demo1--隔行,滑动,点击 变色.</h1>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
 <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo2 -->
<h1>Demo2--隔行,滑动,点击 变色.+ 多选框选中的行 变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
  <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
 <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
  <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<!-- demo3 -->
<h1>Demo3--隔行,滑动,点击 变色.+ 单选框选中的行 变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
  <td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
  <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
  <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
 <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
  <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

希望本文所述对大家jQuery程序设计有所帮助。

二、初解决:先上来把数据库的数据查询出来,以List<Activity>
activities保存,再存到json对象中传回页面。像这样json.put(“activities”,activities);

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery
form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

您可能感兴趣的文章:

  • jQuery动态生成不规则表格(前后端)
  • jQuery动态生成表格及右键菜单功能示例
  • JQuery
    动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery
    Ajax动态生成Table表格
  • Jquery
    动态生成表格示例代码
  • jQuery实现多按钮单击变色
  • 用JQuery实现表格隔行变色和突出显示当前行的代码
  • jQuery代码实现表格中点击相应行变色功能
  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码
  • jquery实现表格中点击相应行变色功能效果【实例代码】
  • jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
  • jQuery实现动态生成表格并为行绑定单击变色动作的方法

  到js页面了,然后就开始蒙蔽了。本来jqeury就小白,遇到这种情况就更没办法了。

希望本文所述对大家jQuery程序设计有所帮助。

三、问大牛:大牛给我提供了两种思路:我的理解是遇到这种情况可以先把数据在后台封装成你需要的数据结构,在传到前台,就会很好处理。

您可能感兴趣的文章:

  • jQuery动态生成不规则表格(前后端)
  • jQuery动态生成表格及右键菜单功能示例
  • JQuery
    动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery
    Ajax动态生成Table表格
  • Jquery
    动态生成表格示例代码
  • jQuery实现多按钮单击变色
  • 用JQuery实现表格隔行变色和突出显示当前行的代码
  • jQuery代码实现表格中点击相应行变色功能
  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码
  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
  • jquery实现表格中点击相应行变色功能效果【实例代码】
  • jQuery实现动态生成表格并为行绑定单击变色动作的方法

  第一种:构造Map:Map<String,Map<String,List<Activity>>>

  第二中:构造List:这种需要封装出新的java对象.形如:List<ActivityCode>.

      对象ActivityCode有List<ActivityVersion>这个属性,对象ActivityVersion有属性List<Activity>

  我用的是第一种:首先转换数据结构:

 public static Map<String, Map<String, List<Activity>>> listToMap(
      List<Activity> activities) {
    Map<String, Map<String, List<Activity>>> map = new HashMap<String, Map<String, List<Activity>>>();
    for (Activity detail : activities) {
      if (!map.containsKey(detail.getActivityCode())) {
        Map<String, List<Activity>> mapValue = new HashMap<String, List<Activity>>();
        List<Activity> listValue = new ArrayList<Activity>();
        listValue.add(detail);
        mapValue.put(detail.getActivityVersion(), listValue);
        map.put(detail.getActivityCode(), mapValue);
      } else {
        Map<String, List<Activity>> mapValue = map.get(detail
            .getActivityCode());
        if (!mapValue.containsKey(detail.getActivityVersion())) {
          List<Activity> listValue = new ArrayList<Activity>();
          listValue.add(detail);
          mapValue.put(detail.getActivityVersion(), listValue);
        } else {
          List<Activity> mapValueList = mapValue.get(detail
              .getActivityVersion());
          mapValueList.add(detail);
          mapValue.put(detail.getActivityVersion(), mapValueList);
        }
      }
    }
    return map;
  }

  然后就jQuery遍历map就好了

以上所述是小编给大家介绍的jQuery动态生成不规则表格(前后端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • jQuery动态生成表格及右键菜单功能示例
  • JQuery
    动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery
    Ajax动态生成Table表格
  • Jquery
    动态生成表格示例代码
  • jQuery实现多按钮单击变色
  • 用JQuery实现表格隔行变色和突出显示当前行的代码
  • jQuery代码实现表格中点击相应行变色功能
  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码
  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
  • jquery实现表格中点击相应行变色功能效果【实例代码】
  • jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
  • jQuery实现动态生成表格并为行绑定单击变色动作的方法

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注