使用jQuery調整HTML表列的大小

Question

我正在嘗試colResizable.min.js使html表列可調整大小。 在我的jsp頁面中，我包含了colResizable.min.js文件，如下所示。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.min.css"
rel="stylesheet">
<link href="css/report.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script>
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"> </script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="assets/js/lib/colResizable.min.js"></script>

然后我用這個。

$("#table-0").colResizable();

我的控制台日志中出現以下錯誤。

colResizable.min.js：2 Uncaught TypeError：無法讀取未定義colResizable.min.js：2的屬性'msie'。Uncaught TypeError：$（...）。colResizable不是一個函數

我的完整代碼。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.min.css"
rel="stylesheet">
<link href="css/report.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">  </script>
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"> </script>
<script src="assets/js/lib/jquery-migrate-1.2.1.js"></script>
<script src="assets/js/lib/jspdf.debug.js"></script>
<script src="assets/js/lib/colResizable.min.js"></script>
<script src="assets/js/export.js"></script>
<script src="assets/js/saveButtonHandler.js"></script>
<script type="text/javascript">
$(window)
        .load(
                function() {
                    var myList;

                    if ($('#table-0').length) {

                        var $row = $('#table-0 tr:first');
                        $row.remove();
                    } else {
                        $('#design').append(
                                "<table id='table-0' border=1></table>");
                    }

                    $
                            .getJSON(
                                    "/ReportBuilder/data.json",
                                    function(data) {
                                        console.log("11122333");
                                        console.log(data);
                                        myList = data;

                                        if (myList.length == 0) {
                                            alert("Your Report Has No Data");
                                        } else {
                                            var columns = [];
                                            var headerTr$ = $('<tr/>');

                                            for (var i = 0; i < myList.length; i++) {
                                                var rowHash = myList[i];
                                                for ( var key in rowHash) {
                                                    if ($.inArray(key,
                                                            columns) == -1) {
                                                        columns.push(key);
                                                        headerTr$.append($(
                                                                '<th/>')
                                                                .html(key));
                                                    }
                                                }
                                            }
                                            $("#table-0").append(headerTr$);

                                            for (var i = 0; i < myList.length; i++) {
                                                var row$ = $('<tr/>');
                                                for (var colIndex = 0; colIndex < columns.length; colIndex++) {
                                                    var cellValue = myList[i][columns[colIndex]];

                                                    if (cellValue == null) {
                                                        cellValue = "";
                                                    }

                                                    row$
                                                            .append($(
                                                                    '<td/>')
                                                                    .html(
                                                                            cellValue));
                                                }
                                                $("#table-0").append(row$);
                                            }
                                        }

                                    });
                    $(document).on("dblclick", "#table-0 th", function() {
                        $(this).prop('contenteditable', true);
                    });

                    $(document).on("dblclick", "#subtitle-0", function() {
                        $(this).prop('contenteditable', true);

                    });

                    $(document).on("dblclick", "#title-0", function() {
                        $(this).prop('contenteditable', true);
                    });

                    $("table").colResizable();
                    //makeResizable();

                });
</script>
</head>

我的代碼有什么問題？ 任何建議表示贊賞。

謝謝

Answer 1

您正在使用新的jquery和在新版本中刪除的jQuery.browser（），因此會給您錯誤。

看到此鏈接http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed

使用http://code.jquery.com/jquery-migrate-1.2.1.js ，它將解決您的問題。

使用jQuery調整HTML表列的大小

問題描述

1 個解決方案

解決方案1
1 已采納 2015-11-16 06:32:25

使用jQuery調整HTML表列的大小

問題描述

1 個解決方案

解決方案1 1 已采納 2015-11-16 06:32:25

解決方案1
1 已采納 2015-11-16 06:32:25