jquery ui选中表格多行数据

浏览数：27 / 时间：2015年06月09日

<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>