zoukankan      html  css  js  c++  java
  • CDF组件Table Component 交互实验

    首先,我建议你应该阅读的我之前转载的一片日志。
    从上述网页,我学会了如何交互表的组成部分。 

    首先,你应该添加“click”函数。 这个函数可以设计的复杂一点,以便完成更加高级的功能。 

    Code:
    var clickFunction = function(){ 
    alert("You clicked on: " + $(this).text())
    }

    二,添加一些功能,代表可点击的东西。(下面的函数,可以更改可点击数据的颜色。)

    Code:
    var mouseoverFunction = function(){
    var oldColor = $(this).css("color");
    $(this).data("oldColor",oldColor);
    $(this).css("color","red");
    $(this).css("cursor","pointer");
    }

    var mouseoutFunction = function(){
    $(this).css("color",$(this).data("oldColor"));
    $(this).css("cursor","default");
    }

    三,增加“postExecution”在table component组件定义。

    Code:
    postExecution: function(){
    var cols = $("#sampleObject td:nth-child(1)");
    cols.die("click");
    cols.die("mouseover");
    cols.die("mouseout");
    cols.live("click",clickFunction);
    cols.live("mouseover",mouseoverFunction);
    cols.live("mouseout",mouseoutFunction);
    }

    最后,你成功了,你可以点击表第一列中的数据。 而且我发现 , 如果你改变cols = $(“#sampleObject td:n-child(1,2 )");, 你可以同时点击第一列和第二列中的数据。
  • 相关阅读:
    js基础第七天
    js基础第六天
    js基础第四天
    js基础第3天
    js基础第二天
    js基础第一天
    第一天CSS实战培训及笔记及感想
    2015年10月23日JS笔记
    表格类选中区域复制的实现
    复杂表头
  • 原文地址:https://www.cnblogs.com/iammatthew/p/1803923.html
Copyright © 2011-2022 走看看