jQuery addClass example

Change class name on click in jQuery

by synz izynz

HTML

<canvas id="myCanvas" width="500" height="1000">
<table class="table" style="border-collapse: collapse;border:1px solid #ccc;">
<tr>
	<th>DATA 1</th>
	<th>DATA 2</th>
</tr>
<tr>
	<td>
	   <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div class="active">3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
	</td>
	<td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div class="active">7</div>
          <div>8</div>
          <div>9</div>
        </div>
	</td>
</tr>
<tr>
	<td>
	   <div class="rw">
          <div>0</div>
          <div class="active">1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
	</td>
	<td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div class="active">3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
	</td>
</tr>
<tr>
	<td>
	   <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div class="active">8</div>
          <div>9</div>
        </div>
	</td>
	<td>
        <div class="rw">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div class="active">5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
	</td>
</tr>
<tr>
	<td>
	  ...

CSS

.table {
    border-collapse: collapse;
    margin-bottom:5px;
}


.table td {
    
    border: 1px solid #CCC;
    /* padding:5px; */
}

.active {
  /* border:1px dotted red; */
  /* padding:2px; */
  background:red;
  color:white
}

.rw div{
  /* width: 10%; */
  float: left;
  /* line-height: 24px; */
  padding:1px;
  width:20px;
  text-align:center
}

JavaScript

var c = $("#myCanvas");
	var ctx = c.get(0).getContext("2d");
	var txt = c.html();
	var sty = $('style').text();

	var c_h = c.height();
	var c_w = c.width();

	var pt1 = new Array();
	var pt2 = new Array(); 
	var fix = 0; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D

	ctx.strokeStyle="red";
	$("tr",c).each(function(m,n){

		var temp = "";

		if(m !== 0){ // Skip HEADER (TH)
			if(m === 1){ // 1st row only store the offset. Not create stroke yet
				$("td",this).each(function(x,y){
					pt1.push($(".active",this).offset()); // Store the offset for each td that have active class;
				});
			}else{ // after 1st row, create stroke - from and to

				if(pt2.length){
			  		temp 	= pt2;
						pt2 	= [];
				}
			  	else{
			  		temp 	= pt1;
						pt1 	= [];
			  	}

				$("td",this).each(function(x,y){
					pt2.push($(".active",this).offset()); // Store the offset for each td that have active class;
				});

			  	for(var q=0; q<$("td",this).length; q++){
            ctx.beginPath();
            ctx.moveTo(temp[q].left, temp[q].top+fix); // From point (active) 1
            ctx.lineTo(pt2[q].left,pt2[q].top+fix); // To point (active) 2 
            ctx.stroke();
			  	}
			}

		}

	  	fix += 3; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D
	});

	/*
		Make table as a image type.
	*/
	var data = "<svg xmlns='http://www.w3.org/2000/svg' width='"+c_w+"' height='"+c_h+"'>" +
				 "<foreignObject width='100%' height='100%'>" +
				   "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'>"+
				   "<style type='text/css'>"+sty+"</style>" +
					 	txt +
				   "</div>" +
				 "</foreignObject>" +
			   "</svg>";
	var DOMURL = self.URL || self.webkitURL || self;
	var img = new Image();
	var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
	var url =...