在动态生成的html数据表上应用jQuery Resizable

Applying jQuery Resizable on a dynamically generated html data table

本文关键字：应用 jQuery Resizable 数据表 html 动态      更新时间：2023-09-26

我需要你的帮助。

一旦生成了动态生成的Datatable，我似乎无法让jQueryResizable API处理它。似乎函数在完成后调用它，但我得到了一个错误"预期对象"

<!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>

这行代码似乎失败了，我没有看到任何错误，它应该可以工作：

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

我真的不确定问题在哪里，但这里有一个解决方案：jsFiddle

我唯一建议你不要这样做的是：

<input type="button" value="LOAD" onclick="writeit()">

但是这样写：

$("#load").on("click",writeit);
相关文章：