我有一个 jsp，其中 onload 调用一个动态创建表的 js。 情况是我以前从未接触过 jquery，我只知道 javascript。
我做了两个场景:
案例一:当我在 jsp 页面本身上创建静态表时，它可以完美运行。 情况二:当我尝试加载由动态 javascript 创建的同一个表时，它失败了。
案例一工作代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/createDynamicTable.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#testTable').dataTable();
});
</script>
</head>
<body>
<div id="tableDataDiv">
<table id="testTable">
<thead>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
案例二不工作的代码
jsp代码
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/createDynamicTable.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#testTable').dataTable();
});
</script>
</head>
<body onload="getTableData();">
<div id="tableDataDiv">
</div>
</body>
</html>
js code
function getTableData(){
var tableDataDivObj = document.getElementById("tableDataDiv");
var tableObj = document.createElement("table");
tableObj.id = 'testTable';
// header
var theadObj = document.createElement("thead");
var thObj = document.createElement("th");
thObj.innerHTML = 'h1';
theadObj.appendChild(thObj);
thObj = document.createElement("th");
thObj.innerHTML = 'h2';
theadObj.appendChild(thObj);
thObj = document.createElement("th");
thObj.innerHTML = 'h3';
theadObj.appendChild(thObj);
tableObj.appendChild(theadObj);
// body
var tbodyObj;
var trObj;
var tdObj;
tbodyObj = document.createElement("tbody");
var count = 1;
for(i = 0; i < 3; i++){
trObj = document.createElement("tr");
for(j = 0; j < 3; j++){
tdObj = document.createElement("td");
tdObj.innerHTML = count;
trObj.appendChild(tdObj);
count++;
}
tbodyObj.appendChild(trObj);
}
tableObj.appendChild(tbodyObj);
tableDataDivObj.appendChild(tableObj);
}
动态创建表格后，我们将其附加到 jsp 页面上的 div。
请提出任何修改建议，以便我可以使此代码正常工作。 这只是我为真实应用程序创建的示例。 其中涉及完整的 mvc，其中表数据是从服务方法和 dao 文件中检索的。我能够将数据放入表中(我在 jsp 页面上收到警报后确定)。我无法在表的 ID 上使用数据表。
提前致谢!
最佳答案
运行 dataTables 初始化时，表不存在是的。您可以在表格初始化后移动 $('#testTable').dataTable(); 来修复。
$(tableObj).dataTable();
在 getTableData 函数的末尾(应该在您的 $(document).ready 回调中定义。
关于javascript - 如何将数据表与动态创建的表一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14891216/