Custom Selector/:myComp

| test1 | test2 | test3(use csv2table & jQchart) |

■<=30
■>30
■>50
■>60
■>80
■>100
■>150

<!--[if IE]>
<script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery.jqchart-0.03-beta-1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jsgt.org/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-2.0b.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//:myComp
jQuery.extend(jQuery.expr[":"], {
 myComp  : function(a,i,m){ 
   var b = Number(
    (a.textContent||a.innerText||jQuery(a).text()||"")
        .replace(/,/g,'')
     );
   return typeof b=='number'? eval(b+m[3]):false;
 }

});

</script>


<style>
/* label Y  */
.jQchart-labelY-canvasMyID{
	font-size : 12px;
}

/* label Data */
.jQchart-labelData-canvasMyID{
	font-size : 10px;
}
</style>

<input 
       class="btn1"
       type    =  "button"
       onclick="$('#view40').csv2table('test3-1.csv',{
         use      : 'jqchart:line#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:120,gap:10},
         onload:function(){
           chkComp();
         },
         sortable : false
       });"
       value="use: jqchart:line ">
<input 
       class="btn1"
       type    =  "button"
       onclick="$('#view40').csv2table('test3-2.csv',{
         use      : 'jqchart:bar#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:150,gap:10},
         onload:function(){
           chkComp();
         },
         sortable : false
       });"
       value="use: jqchart:bar ">


<canvas id="canvasMyID" height="200"></canvas>
<div id="view40"></div>

<script type="text/javascript">
function chkComp(){
 jQuery('table')
  .find('td:myComp(<=30)').css('background','#f00').end()
  .find('td:myComp(>30)').css('background','#f40').end()
  .find('td:myComp(>50)').css('background','#f60').end()
  .find('td:myComp(>60)').css('background','#f80').end()
  .find('td:myComp(>80)').css('background','#fa0').end()
  .find('td:myComp(>100)').css('background','#fd0').end()
  .find('td:myComp(>150)').css('background','#ff0').end()
} ;



  //for csv2table icon
  $.extend($.csv2table,{
    loadImg  : 'http://jsgt.org/lib/jquery/plugin/csv2table/v002/img/icon-loadinfo-w.gif', //Image of now loading...
    sortDImg : 'http://jsgt.org/lib/jquery/plugin/csv2table/v002/img/icon-d.gif',        //
    sortAImg : 'http://jsgt.org/lib/jquery/plugin/csv2table/v002/img/icon-a.gif'         //
  })

</script>