Detailed tutorial on Java Web practice (XV) implementation of modification function (1) -- select table data

Miss Zhu 2022-02-13 08:39:12 阅读数:138

detailed tutorial java web practice

         To realize the modification function , First, select a piece of data in the table , That is, the selected row data of a single machine , In the industry , You can use to add a check box at the beginning of a line 、 Radio button 、 Let the background color change to achieve , This time we use the form of background color change , As shown in the figure below , Only click on the line , Then click the Modify button .
 Insert picture description here
         To realize the change of web page content or style through user operation on the page , That is the need to use JavaScript and CSS Use it with .
         First, in the show.jsp In the student data row of the table in , Set properties class=“stu”, The reason why we set class Instead of setting up id, It's because of tr It's generated in a loop , If you use id Will violate id The only principle .
 Insert picture description here
         In internal style sheets , Define a combination selector for the selected row :

#data .selected {

background: #337ab7
}

         Use jQuery, Set the click event... For the row , Trigger function when clicked , The function removes all row objects selected Of class value , And the object of the current event class Attribute addition selected value .

$("#data .stu").click(function() {

$("#data .stu").removeClass("selected")
$(this).addClass("selected");
selectedId = $(this).children().eq(0).text();
})

         In this way, the row of the selected table can be realized , As the screenshot effect at the beginning of this article .

copyright:author[Miss Zhu],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/02/202202130839101542.html