jQuery+js实现Table表格可任意拖动调整列宽度大小适用于列表页等表头拖动宽度设置

共5个文件
js：3个
htm：1个
css：1个
jQuery+js 实现Table表格可任意拖动调整列宽度大小适用于列表页等表头拖动宽度设置，完美兼容IE，FireFox，Google Chrome浏览器。
资源详情
资源推荐
资源评论
      60310283647516<!DOCTYPE html">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery表格可拖动调整列宽度大小|jsfoot 网页特效</title>
    <meta name="keywords" content="jQuery表格可拖动调整列宽度大小">
    <meta name="description" content="jquery特效,js特效,flash特效,div+css教程,html5教程">

    <script type="text/javascript" src="./jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files/jquery.1.4.2-min.js"></script>
</head>

<body style="">

    <script type="text/javascript">
        //屏蔽右键菜单
        document.oncontextmenu = function (event) {
            if (window.event) {
                event = window.event;
            } try {
                var the = event.srcElement;
                if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                    return false;
                }
                return true;
            } catch (e) {
                return false;
            }
        }
</script>


    <div class="shortcut">
        <h1><a href="http://www.jsfoot.com/jquery/table/more/2013-06-13/1073.html">jQuery表格可拖动调整列宽度大小</a></h1>
        <span class="right">
            <a href="http://www.jsfoot.com/jquery/table/more/2013-06-13/1073.html">
                <strong>下载特效</strong>
            </a>
        </span>
        <div class="clr"></div>
    </div>
    <!--/ Codrops top bar -->

    <div class="headeline"></div>



    <!--演示内容开始-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
        }

        table {
            empty-cells: show;
            border-collapse: collapse;
            border-spacing: 0;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        .demo {
            width: 760px;
            margin: 40px auto;
        }

        .demo h2 {
            font-size: 18px;
            height: 52px;
            color: #3366cc;
            text-align: center;
        }

        .listext th {
            background: #eee;
            color: #3366cc;
        }

        .listext th, .listext td {
            border: solid 1px #ddd;
            text-align: left;
            padding: 10px;
            font-size: 14px;
        }

        .rc-handle-container {
            position: relative;
        }

        .rc-handle {
            position: absolute;
            width: 7px;
            cursor: ew-resize;
            cursor: e-resize;
            *cursor: pointer;
            margin-left: -3px;
        }
    </style>

    <div class="demo">
        <h2>jQuery拖动调整表格列宽度</h2>
        <div class="rc-handle-container" style="width: 760px;">
            <div class="rc-handle" style="left: 75px; height: 169px;"></div>
            <div class="rc-handle" style="left: 307px; height: 169px;"></div>
        </div>
        <table width="100%" class="table listext" data-resizable-columns-id="demo-table">
            <thead>
                <tr>
                    <th data-resizable-column-id="#">#</th>
                    <th data-resizable-column-id="first_name">First Name</th>
                    <th data-resizable-column-id="last_name">Last Name</th>
                    <th data-resizable-column-id="username" id="username-column" data-noresize="">Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script type="text/javascript" src="./jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files/jquery.js"></script>
    <script type="text/javascript" src="./jQuery表格可拖动调整列宽度大小 jsfoot 网页特效_files/jquery.resizableColumns.js"></script>
    <script type="text/javascript">
        $(function () {
            $("table").resizableColumns({});
        });
</script>
    <!--演示内容结束-->

</body>
</html>
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。