<script src=".. /public/js/jquery-1.8.3.js "></script><script src=".. /public/js/jquery-ui-1.10.4.custom.js "></script><script src=".. /public/js/jquery-ui.js "></script><link rel="style/css" href=". /public/css/jquery-ui.css " ><title></title><style type="Text/css"> td { border: 1px solid;} </style><script type="Text/javascript">$ (document). Ready ( function(){$("#fruits"). Selectable ({//Drag multiple selectionFilter"Tbody TR",//Select the TR under Tbody to make multiple selectionsStop function(){ //When the drag selection ends, the stop event is triggered varresult=$ ("#plate"). Empty (). HTML ($ ( This). Find (". ui-selected"). Map ( function(){ return This. ID; }). Get (). Join (",")); } }); });</script></head><body> <table id="fruits" style="border-collapse:collapse;" > <thead> <tr> <th>Name</th> <th>Color</th> <th>Taste</th> </tr> </thead> <tbody> <tr id="Apple"> <TD>Apple</td> <TD>Red</td> <TD>Sweet</td> </tr> <tr id="Orange"> <TD>Orange</td> <TD>Orange</td> <TD>Acid</td> </tr> <tr id="Kiwi"> <TD>Kiwifruit</td> <TD>Brown</td> <TD>Sweet</td> </tr> <tr id="Grape"> <TD>Grape</td> <TD>Purple</td> <TD>Sweet</td> </tr> </tbody> </table> <div id="Plate">Results of multiple selections:</div></body>
jquery UI selects multiple rows of data in a table