jquery-resizable - 表格列调整
测试源码：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> jquery-resizable - 表格列调整_脚本之家 </title> <style> html, body { height: 100%; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 0; margin: 0; } .page-container { margin: 20px; } table { border-collapse: collapse; width: 600px; } td, th { padding: 8px; border: 1px solid silver; } th { color: white; background: #535353; } pre { margin: 20px; padding: 10px; background: #eee; border: 1px solid silver; border-radius: 4px; } /* this is important! make sure you define this here or in jQuery codef */ .resizer { position: absolute; top: 0; right: -8px; bottom: 0; left: auto; width: 16px; cursor: col-resize; } </style> </head> <body> <div class="page-container"> <h1> jquery-resizable - 表格列调整 </h1> <table> <thead> <th> col 1 </th> <th> col 2 </th> <th> col 3 </th> <th> col 4 </th> </thead> <tbody> <tr> <td> Column 1 </td> <td> Column 2 </td> <td> Column 3 </td> <td> Column 4 </td> </tr> <tr> <td> Column 1 </td> <td> Column 2 </td> <td> Column 3 </td> <td> Column 4 </td> </tr> </tbody> </table> </div> <script src='jquery-3.2.1.min.js'> </script> <script src='jquery-resizable.js'> </script> <script> //$("td,th") $("td:first-child,td:nth-child(2),td:nth-child(3),th:first-child,th:nth-child(2),th:nth-child(3)"). css({ /* 需要包含 resizer */ position: "relative" }) /* 检查 .resizer CSS */ . prepend("<div class='resizer'></div>"). resizable({ resizeHeight: false, // 通过 .resizer 元素，使用列作为句柄和筛选器 handleSelector: "", onDragStart: function(e, $el, opt) { // 只拖拽 resizer if (!$(e.target).hasClass("resizer")) return false; return true; } }); </script> </body> </html> |
本站大部分文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了您的权益请来信告知我们删除。邮箱：1451803763@qq.com