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 )");, 你可以同时点击第一列和第二列中的数据。