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未捕获的TypeError：无法读取属性＆＃39; msie＆＃39;未定义的colResizable.min.js：2 未捕获的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 个答案: