Home > Developer > Web Develop
In jQuery_review table, select background color and radio Based on rows, and select jquery_reviewtable
Similar operations are often seen in various WEB systems. Click a row in the list and the current row will change to another color, and the radio will be selected. In addition, the dynamic effects are usually displayed when the mouse slides over. For example, when the mouse slides over the current row, there will be a color-changing style. Taking the opportunity to review jQuery, let's take a look at the steps to use jQuery to implement this function.
In this function, there is a small point of attention: how to add a radio? Add an HTML in HTML and use the following code <input type = "radio" name = "fruit"> in this way, the HTML parsing engine will help us with one thing, it will maintain such a rule for us. The radio boxes of the same name can only be selected at the same time, which is also the reason why this box is generally called a single commit. In addition, no matter which function is implemented, the most important thing is, of course, how to select the elements of the current page. In this DEMO, the following methods are used. Element. hasClass ("aClass") returns a boolean value to determine whether the current element contains the aClass style. Element. removeClass ('aclass ') is to delete the type of aClass from the element. Element. find (selector) is to find the element that matches the selector from the current element. In jQuery, all functions that can pass the selector as a parameter are powerful, such as filter (), for example, has.
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Jquery obtains the selected radio event. When radio is selected by default, one row of tr is displayed. When another radio is selected, different tr records are displayed.<Script type = "text/javascript" src = "jquery-1.9.1.min.js"> </script> <script type = "text/javascript"> $ (function () {showCont (); $ ("input [name = price_type]"). click (function () {showCont () ;}); function showCont () {switch ($ ("input [name = price_type]: checked "). attr ("id") {case "price_type1": // alert ("one"); $ ("# sellInfo2 "). hide (); $ ("# sellInfo1 "). show (); break; case "price_type2": $ ("# sellInfo1 "). hide (); $ ("# sellInfo2 "). show (); break; default: break; }}</script>
Jquery click the table row event to conflict with the selected radio event.The first thing you wrote is that there is a problem. When you click radio, it is actually selected, but the event bubbles to tr and another click event is executed, therefore, the code is optimized to the following:
$ ("Tr. resultTr"). bind ("click", function (){
$ (This). find ("input: radio"). attr ("checked", "checked ")
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
