Jay,
Here is a full working sample that takes queryTask results and builds a HTML Table from the results:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Query State Info without Map</title>
<script src="http://js.arcgis.com/3.14/"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 8px;
}
th {
background-color: #eee;
}
</style>
<script>
require([
"dojo/dom",
"dojo/dom-construct",
"dojo/on",
"esri/tasks/query",
"esri/tasks/QueryTask",
"dojo/domReady!"
], function (dom, domConstruct, on, Query, QueryTask) {
var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5");
var query = new Query();
query.returnGeometry = false;
query.outFields = [
"SQMI", "STATE_NAME", "STATE_FIPS", "SUB_REGION", "STATE_ABBR",
"POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI", "HOUSEHOLDS",
"MALES", "FEMALES", "WHITE", "BLACK", "AMERI_ES", "ASIAN", "OTHER",
"HISPANIC", "AGE_UNDER5", "AGE_5_17", "AGE_18_21", "AGE_22_29",
"AGE_30_39", "AGE_40_49", "AGE_50_64", "AGE_65_UP"
];
on(dom.byId("execute"), "click", execute);
function execute () {
query.text = dom.byId("stateName").value;
queryTask.execute(query, showResults);
}
function showResults (results) {
domConstruct.empty("info");
var table = domConstruct.toDom('<table style="width:100%"></table>');
domConstruct.place(table, "info");
var resultItems = [];
var resultCount = results.features.length;
var tableHeaderRow, tableHeader, tableRow, tableCol, tableBody;
for (var i = 0; i < resultCount; i++) {
if(i === 0){
tableHeaderRow = domConstruct.create("tr");
domConstruct.place(tableHeaderRow, table);
tableBody = domConstruct.create("tbody");
domConstruct.place(tableBody, table);
}
tableRow = domConstruct.create("tr");
domConstruct.place(tableRow, tableBody);
var featureAttributes = results.features.attributes;
for (var attr in featureAttributes) {
if(i === 0){
tableHeader = domConstruct.toDom('<th>' + attr + '</th>');
domConstruct.place(tableHeader, tableHeaderRow);
}
tableCol = domConstruct.toDom('<td>' + featureAttributes[attr] + '</td>');
domConstruct.place(tableCol, tableRow);
}
domConstruct.place(tableRow, table);
}
}
});
</script>
</head>
<body>
US state name :
<input type="text" id="stateName" value="California">
<input id="execute" type="button" value="Get Details">
<br />
<br />
<div id="info"></div>
</body>
</html>
