How to hide the tr of table in jquery

Jquery method to hide tr in table: 1. Use the "$(".tr class name")" statement to obtain the object according to the specified class value; 2. Use the hide() method to hide the obtained object , the syntax is "$(".tr class name").hide();".

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

How jquery hides tr in table

1. Create a new html file and name it test.html to explain how jquery determines Whether the element is visible. In the test.html file, use the table, tr, and td tags to create a table with six rows and two columns. To facilitate viewing, set a 1px border for the table. In the test.html file, in the table table, set the class attribute of part of tr to aa, and set the id of the last row to bb.

In the test.html file, use the button tag to create two buttons, namely "Hide tr" and "Show tr". The code is as follows:

2. In the test.html file, bind onclick events to the two button buttons respectively. When the buttons are clicked, the "hiddentr()" function and the "displaytr()" function are executed respectively.

In the js tag, create the hiddentr() function and the displaytr() function. In the hiddentr() function, obtain the tr row object with class aa. Use the hide() method to hide tr. In displaytr( ) function, obtain the tr row object with id bb, and use the show() method to display tr.

Open the test.html file in the browser and click on the buttons to see the effect.

After clicking to hide tr

Create a test.html file. Within the file, use the table, tr, and td tags to create a table with six rows and two columns. Create two button buttons at the same time to trigger the execution of js functions. In the js tag, create the hiddentr() function and the displaytr() function. In the hiddentr() function, obtain the tr row object with class aa. Use the hide() method to hide tr. In the displaytr() function, obtain the id. For the tr row object of bb, use the show() method to display tr.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to hide the tr of table in jquery. For more information, please follow other related articles on the PHP Chinese website!