5

テーブルが動的に作成されるjsをオンロードで呼び出すjspがあります。状況は、私が以前に jquery に取り組んだことがないということです。私が知っているのは JavaScript だけです。

2 つのシナリオを作成しました。

ケース1：jspページ自体に静的テーブルを作成すると、問題なく動作します。ケース 2 : 動的 JavaScript によって作成された同じテーブルをロードしようとすると、失敗します。

ケース I 作業コード

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

ケース II 動作しないコード

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でデータテーブルを使用できません。

前もって感謝します！

4

4 に答える 4

2

dataTables の初期化が実行されると、テーブルは存在しません。$('#testTable').dataTable();テーブルが初期化された後に移動することで修正できます。

$(tableObj).dataTable();

関数の最後にgetTableData(コールバックで定義する必要があり$(document).readyます。

于 2013-02-15T09:13:21.740 に答える
2

ヨンは、javascript で動的に作成されたテーブルにデータテーブルを追加できます。コードは次のとおりです。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
function createTable(){

var myTableDiv = document.getElementById("box");
var table = document.createElement('TABLE');
table.id='tableId'
table.border='1';

var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
cell.innerHTML = "<b>Name</b>";
cell1.innerHTML = "<b>Age</b>";
cell2.innerHTML = "<b>Email</b>";
cell3.innerHTML = "<b>address</b>";

var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);

for (var i=0; i<3; i++){
var tr = document.createElement('TR');
tableBody.appendChild(tr);

for (var j=0; j<4; j++){
   var td = document.createElement('TD');
   td.width='75';
   td.appendChild(document.createTextNode("Cell " + i + "," + j));
   tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
$("#tableId").dataTable();
}
</head>
<body>
<input type="button" onclick="createTable();" value="CreateTable" /></br>
<div id="box">
</div>
</body>
</html>
于 2015-06-22T11:12:05.997 に答える
0

動的に作成する方法の例をここで見つけることができます：http： //datatables.net/release-datatables/examples/data_sources/js_array.html

于 2013-02-15T13:16:53.663 に答える
0

動的な JavaScript によってテーブルが作成されたら、jquery メソッドを呼び出してください。

于 2013-02-15T09:16:06.530 に答える