Question

我需要你的帮助，

我正在尝试创建一个动态生成的表并在顶部标题上应用jQuery Resizable，但它似乎无法正常工作。如何将jQuery应用于动态生成的表？

<!DOCTYPE html>

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.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 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>\n'

    html += '<scr'+'ipt type="text/javascript">\n'
    html += '$(function() {\n'
    html += '$("#mstrWrapper tr th" ).resizable({\n'
    html += ' handles: "e" \n'
    html += '});\n'
    html += '});\n'
    html += '<\/script>\n'


document.getElementById('mstrWrapper').innerHTML = html

}
</script>


</head>

<body>
<div id="mstrWrapper"></div>
<input type="button" value="LOAD" onclick="writeit()">

</body>

</html>

Answer 1

删除此部分：

html += '<scr'+'ipt type="text/javascript">\n'
html += '$(function() {\n'
html += '$("#mstrWrapper tr th" ).resizable({\n'
html += ' handles: "e" \n'
html += '});\n'
html += '});\n'
html += '<\/script>\n'

在此之后：

document.getElementById('mstrWrapper').innerHTML = html;

添加以下代码：

$("#mstrWrapper tr th" ).resizable({ handles: "e" });

如果它有效，请告诉我们您为什么以这种方式“创建动态生成的表格”？

我的表动态生成后，jQuery UI Resizable无法正常工作？

1 个答案: