Your question, your audience. Choose who sees your identity—and your question—with question security.
var jsonObj = { Some JSON Object with rows of data };
var table = document.getElementById('myPageContentTable');
var tbody = document.createElement('tbody');
// --------------------------------------
// String concatenation - very fast
var tableCode = '';
for (var row in jsonObj) {
tableCode += '<tr>';
for (var cell in row) {
tableCode += '<td>' + row[cell] + '</td>;
}
tableCode += '</tr>';
}
tbody.innerHTML = tableCode;
table.appendChild(tbody);
// --------------------------------------
// Or this, which would be much slower
for (var row in jsonObj) {
var tr = document.createElement('tr');
for (var cell in row) {
var td = document.createElement('td');
td.innerHTML = row[cell];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26823698.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready( function () {
$("#click-me").click( function() {
$("#myPageResultContentDiv").show();
var strVar = $("#strVar").text();
$("#myPageContentTable>thead").after( strVar );
});
});
</script>
</head>
<body>
<input id="click-me" type="button" value="Click Me!">
<div id="myPageResultContentDiv" style='display:none'>
<table id='myPageContentTable' class="content" style="width: 995px;">
<thead>
<tr id="0">
<th style="width: 104px;" class="active"><a id="sc0" name="sc0" href="javascript:void(0)" onClick="javascript:redoSort(0);">Serial Number</a></th>
<th style="width: 130px;" class="active"><a id="sc1" name="sc1" href="javascript:void(0)" onClick="javascript:redoSort(1);">Product Name</a></th>
<th style="width: 210px;" class="active"><a id="sc2" name="sc2" href="javascript:void(0)" onClick="javascript:redoSort(2);" class="down">Marketing Program Name</a></th>
<th style="width: 210px;" class="active">Marketing Program Description</th>
<th style="width: 30px;">Remove</th>
</tr>
</thead>
</table>
</div>
<fieldset style="width: 50%; padding: 20px;"><legend>Simulate <b>strVar</b> text</legend>
<textarea id="strVar" style="width: 100%;" rows="10">
<tbody>
<tr>
<td>Row 1</td>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>Row 2</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>Row 4</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</tbody>
</textarea>
</fieldset>
</body>
</html>
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Open in new window