JS Implementation Table of the selected row-------Day58

Source: Internet
Author: User

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 ...





Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.