Home > Web Front-end > JS Tutorial > jquery realizes that table rows will change color when the mouse clicks (code attached)

jquery realizes that table rows will change color when the mouse clicks (code attached)

不言
Release: 2018-08-16 14:11:33
Original
3413 people have browsed it

The content of this article is about how jquery can realize that table rows will change color when the mouse is clicked (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

After about a year, I learned new knowledge, from trying Linux deployment projects, network security, to back-end development, and then using Jquery,

and it is a must. Also expose yourself to maybe a broader perspective. For a newly graduated college student. Founder, I have never used jquery.

Although I have been trained and learned, it only took two days and I have a little understanding. The drawing page at work must be adjusted by professionals later, terrible,

I feel like this is about to be the beginning of my move to the front end, but I am still very happy. When adjusting the page, it must be stable and it takes time.

It didn’t take much effort for me to adjust this js, but I also referred to it online, and I didn’t know much about the commands. In the background, I simply abandoned the various

examples on the Internet and wrote according to my own ideas. It's just two sentences of code. Maybe my writing is not perfect, but sharing it is a record of my growth process

. OK, no more nonsense. To start, let me first introduce my environment.

1. The front page is nothing, as shown below. There may be a bunch of tds in the middle, and of course there may not be . Then, remember to add an event to each line of . If you are writing is

better, just add it to the tag and it will be ok

 <tbody><tr onclick=“SingleChangeColor(this)”>
  <td></td>.......
  </tr><tbody>
Copy after login

2. Then there is this method of js You can write it in

  or in js.

3.Then the method is:

function SingleChangeColor(e){
  //1.清楚表格的背景颜色:注意#contentTable是你表格的ID,ID唯一
  $("#contentTable").find("td").css("background","");
  //2.改变当前点击行的背景颜色
  $(e).find("td").css("background","red");//red为颜色,你也可以输入颜色值#00000等等
}
Copy after login

4.According to the situation

Related recommendations:

jquery implements clicking on the page to calculate the number of clicks_ jquery

javascript Based on jQuery, the table changes color/restoration when hovering, clicks the table to change color/restoration, clicks the row to select Checkbox_jquery

The above is the detailed content of jquery realizes that table rows will change color when the mouse clicks (code attached). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template