<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({ //进行拖动多选
filter:"tbody tr", //选择tbody下的tr进行多选
stop:function(){ //当拖动选择结束时，触发stop事件
var result=$("#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>名称</th>
<th>颜色</th>
<th>味道</th>
</tr>
</thead>
<tbody>
<tr id="苹果">
<td>苹果</td>
<td>红色</td>
<td>甜</td>
</tr>
<tr id="橘子">
<td>橘子</td>
<td>橙色</td>
<td>酸</td>
</tr>
<tr id="猕猴桃">
<td>猕猴桃</td>
<td>褐色</td>
<td>甜</td>
</tr>
<tr id="葡萄">
<td>葡萄</td>
<td>紫色</td>
<td>甜</td>
</tr>
</tbody>
</table>
<div id="plate">多选的结果：</div>
</body>时间： 2024-11-05 15:53:49