Hello,
I can't seem to get the jQuery UI .resizable() API to work properly. By default, everything looks fine. When the API is applied to the table, it should allow the th columns be resized at the users will after the table is dyanically written.
Any ideas?
Code:
<!DOCTYPE html>
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style type="text/css">
#mstrWrapper {
position: relative;
height: 200px;
width: 800px;
border: 1px solid #808080;
overflow-y: scroll;
overflow-x: scroll;
scrollbar-base-color: #DFDFDF;
scrollbar-arrow-color: #235A81;
}
#mstrTable {
width: 800px;
color: #235A81;
font-family: Arial;
font-size: 9pt;
border: 0px;
}
#mstrTable th, #mstrTable td {
border-bottom: 1px solid #808080;
border-right: 1px solid #808080;
padding: 3px;
}
#mstrTable th {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
width: 110px;
height: 18px;
border-bottom: 1px solid #808080;
border-top: 0px;
}
#mstrTable thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
#mstrTable tbody tr:first-child td {
padding: 28px 3px 3px 3px;
}
#mstrTable tr.normal td {
color: #235A81;
background-color: white;
}
#mstrTable tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type="text/javascript">
var table
var tbody
var ishigh
function writeit() {
var html = '<table id="mstrTable" cellspacing="0" cellpadding="0" class="ui-widget-content">\n'
html +='<thead>\n'
html +='<tr> \n'
html +='<th>File Number<\/th>\n'
html +='<th>Date1<\/th>\n'
html +='<th>Date2<\/th>\n'
html +='<th>Status<\/th>\n'
html +='<th>Num.<\/th>\n'
html +='<\/tr>\n'
html +='<\/thead>\n'
html +='<tbody>\n'
html +='<tr> \n'
html +='<td>KABC<\/td>\n'
html +='<td>09\/12\/2002<\/td>\n'
html +='<td>09\/12\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>0<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>KCBS<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>Lockdown<\/td>\n'
html +='<td>2<\/td>\n'
html +='<\/tr>\n'
html +='<tr>\n'
html +='<td>WFLA<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>09\/11\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>1<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WPPP<\/td>\n'
html +='<td>03\/19\/2003<\/td>\n'
html +='<td>03\/19\/2003<\/td>\n'
html +='<td>In-Progress<\/td>\n'
html +='<td>0<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WRRR<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>5<\/td>\n'
html +='<\/tr>\n'
html +='<tr>\n'
html +='<td>WTTT<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>In-Progress<\/td>\n'
html +='<td>0<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WYYD<\/td>\n'
html +='<td>02\/11\/2002<\/td>\n'
html +='<td>02\/11\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>7<\/td>\n'
html +='<\/tr>\n'
html +='<tr> \n'
html +='<td>WRRR<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>02\/19\/2002<\/td>\n'
html +='<td>Submitted<\/td>\n'
html +='<td>5<\/td>\n'
html +='<\/tr>\n'
html +='<\/tbody>\n'
html +='<\/table>'
document.getElementById('mstrWrapper').innerHTML = html
table = document.getElementById("mstrTable");
tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement; //assumes there are no other elements inside the td
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
return GoTo('mstrTable', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
return GoTo('mstrTable', newhigh);
}
}
//JQUERY:
$(function() {
$( "#mstrTable tr th" ).resizable({
handles: 'e'
});
});
}//end of function
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
}
</script>
</head>
<body>
<div id="mstrWrapper"></div>
<input type="button" value="LOAD" onclick="writeit()">
</body>
</html>
Before you post, read our: 
