The first want to more use JS to dynamic operation of the table, is because after the application of Easyui, found to write a <table id= "tt" ></TABLE>, this is enough, the interface is left such a label, suddenly clean a lot of ah, Of course, there is a lot of knowledge to apply, like JSON, and so on, that later in the first imitation of the next table to create some of the style bar.
The previously recorded dynamic increase of one row, InsertRow () and Insertcell () so two methods, and then the deletion of a row or a column of DeleteRow () and Deletecell (), remember Oh, did not write is from the top down, from left to right oh , let's record it today and select one of the rows in the table.
Let's start by imagining its implementation:
1. Original style:
2. The mouse is out of date:
3. Click on a line with the mouse selected
Let's take a note of its implementation, although it looks so simple.
1, first write the HTML language, of course, the application of the same code a few days ago, but a little 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 where the difference is, that is, there are more events such as OnClick, onmouseover, and onmouseout on the table, and the parameters of the event pass when the 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) + "line");}}
The code here has one of the most critical points:
The application of event.srcElement.tagName and event.srcElement.parentElement here;
The event is the source object of the trigger time, while the srcelement is the selected object, and Parentelement is the parent object of the selected object; With the current example, the mouse is placed on the table to activate the time GetRow (this), When the mouse is placed above any cell, its srcelement is TD, and its parentelement is the TR line, then found a row of objects, the operation of it back to the most basic of those began AH
Today submitted a small resource, has been flying eagle, have to say, I look for a few pictures too do not match, although there is the general meaning of flying, but the overall display is too rough, but the words rough not rough it, and finished when I looked very happy, haha ...