Javascript 使用jQuery调整HTML表列的大小
我正在尝试colresizeable.min.js使html表列的大小可调整。在我的jsp页面中,我包含了colresizeable.min.js文件,如下所示Javascript 使用jQuery调整HTML表列的大小,javascript,jquery,Javascript,Jquery,我正在尝试colresizeable.min.js使html表列的大小可调整。在我的jsp页面中,我包含了colresizeable.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"
<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>
我的控制台日志中出现以下错误
ColResizeable.min.js:2未捕获类型错误:无法读取未定义ColResizeable.min.js:2的属性“msie”
未捕获的TypeError:$(…)。ColResizeable不是函数
我的全部代码
<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>
$(窗口)
.装载(
函数(){
var myList;
如果($('#表-0')。长度){
变量$row=$(“#表-0 tr:first”);
$row.remove();
}否则{
$(“#设计”)。追加(
"");
}
$
.getJSON(
“/ReportBuilder/data.json”,
功能(数据){
控制台日志(“11122333”);
控制台日志(数据);
myList=数据;
如果(myList.length==0){
警报(“您的报告没有数据”);
}否则{
var列=[];
var headerTr$=$('');
对于(变量i=0;i
我的代码怎么了?如有任何建议,我们将不胜感激
谢谢您正在使用新的jquery,并且jquery.browser()已在新版本中删除。因此,它会给您带来错误 请参阅此链接
使用它将解决您的问题。您是否检查了脚本是否正在加载?jQuery.browser()removed@Drixson,是的,我的脚本正在加载。那么如何在新的jquery版本中调整表列的大小呢?我试过了。现在控制台中没有任何错误。但我的表仍然无法调整大小:(在创建表后调用$(“table”).colresizeable()
<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>