Primeval JS Operation Table

Most want to start with a lot of other js to dynamically operating table, due after the application of easyUI, found a direct write <table id = "tt"> </ table>, this is enough, there on the left such an interface label, and suddenly clean a lot of ah, of course, there are a lot of knowledge to be applied, like json, etc., to say here that the latter generates some style to imitate it under the table.

The previous record of dynamic add a line, insertRow () and insertCell () so two ways; then recorded delete a row or deleteRow () and deleteCell () one, I remember, oh, did not write the word is from top to bottom, from left to right Oh, come under the record today, among the selected table row

First conceived under the effect of its implementation:

1, original style:

2, mouseover:

3, click mouse to select a row

We recorded it in detail to achieve, even though it looks so simple.

1, the first to write html language, of course, a few days ago the same code or application, but a little bit more ...

 

 <div id="testDiv" style="width: 60%;margin-left: 10%;margin-top: 50px;height: 1100px;background-color: #f2f2f2;padding: 60px 10px 10px 200px;">
	  	<table width="100%" height="100px" border="1px"  id="tad" onmouseover="getrow(this)" onmouseout="backrow(this)" onclick="selectRow(this)">
	  		<tr><td>1</td><td>1</td></tr>
	  		<tr><td>3</td><td>1</td></tr>
	  		<tr><td>5</td><td>1</td></tr>
	  	</table> 
	  	<input type="button" onclick="b()" value="add">
	  	<input type="button" onclick="c()" value="delRow">
	  	<input type="button" onclick="d()" value="delCol">
	  </div>

See the difference in what the what, when that is on the table for more than a onclick, onmouseover and onmouseout and other events, and the event passed parameter table object itself

 

2, javascript to achieve the corresponding effect

 

function getrow(obj){
   if(event.srcElement.tagName=="TD"){
   curRow=event.srcElement.parentElement;
   curRow.style.background="yellow";
   }
}
function backrow(obj){
	if(event.srcElement.tagName=="TD"){
	curRow=event.srcElement.parentElement;
	curRow.style.background="#f2f2f2";
	}
}
function selectRow(obj){
	if(event.srcElement.tagName=="TD"){
	curRow=event.srcElement.parentElement;
	curRow.style.background="blue";
	alert ( "This is the first" + (curRow.rowIndex + 1) + "OK");
	}
}

Coding here are one of the most crucial point:

 

event.srcElement.tagName and event.srcElement.parentElement applied here;

event source object is the trigger time is selected and the srcElement objects and parentElement selected object is a parent object layer; a current sample to simply explanation, that is, put Table mouse, thereby activating time getRow ( this), when the mouse is placed either on a cell, it is srcElement td, and its parentElement that is tr a row, the object line is found, it will return to the main operation that began the ah