在动态生成的 html 数据表上应用 jQuery Resizable [英] Applying jQuery Resizable on a dynamically generated html data table
本文介绍了在动态生成的 html 数据表上应用 jQuery Resizable的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要你的帮助.
一旦生成了动态生成的数据表，我似乎无法让 jQuery Resizable API 处理它.该函数似乎在完成后调用它，但我收到错误预期对象"
I can't seem to get the jQuery Resizable API to work on my dynamically generated Datatable once it has been generated. It seems the function calls it after it has completed but I get an error "object expected"
<!DOCTYPE html>
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="/jq/images/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="/jq/jquery.min.js" type="text/javascript"> </script>
<script src="/jq/jquery-ui.min.js" type="text/javascript"> </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 tbody tr:first-child td {
padding: 3px 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
$( "#mstrTable tr th" ).resizable({ handles: 'e' });
}
</script>
</head>
<body>
<div id="mstrWrapper"></div>
<input type="button" value="LOAD" onclick="writeit()">
</body>
</html>
似乎代码在这一行失败了，我看不出有什么问题，它应该可以工作:
It seems the code fails on this line, I don't see anything wrong, and it should work:
$( "#mstrTable tr th" ).resizable({ handles: 'e' });
推荐答案
我真的不知道问题出在哪里，但这里有一个解决方案:jsFiddle
I am really not sure where the problem is, but here is a solution : jsFiddle
我唯一建议你不要做的就是:
The only thing i advice you not to do is this :
<input type="button" value="LOAD" onclick="writeit()">
但是这样写:
$("#load").on("click",writeit);
这篇关于在动态生成的 html 数据表上应用 jQuery Resizable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
