Binding html editable Table to Rest Service result
<html>
<head>
<title>Dynamic Tables in HTML</title>
<script type="text/javascript" src="Scripts/SDK.REST"></script>
<script type="text/javascript" src="../ClientGlobalContext.js.aspx"></script>
<script type="text/javascript" src="Scripts/json2"></script>
<script type="text/javascript">
var recordsGrid;
document.onreadystatechange = function () {
if (document.readyState == "complete") {
recordsGrid = document.getElementById("recordsGrid");
retrieveRecords();
}
};
function retrieveRecords() {
debugger;
SDK.REST.retrieveMultipleRecords("new_businesstier", "$select=new_name,new_businesstierId,new_MinValue,new_Percent", results, errorHandler, oncomplete)
}
function results(result) {
debugger;
for (var i = 0; i < result.length; i++) {
var aResult = result[i];
var row = document.createElement("tr");
var cell1 = document.createElement("td");
// setElementText(cell1, (aResult.hpcrm_name == null) ? "" : aResult.hpcrm_name);
cell1.innerText = aResult.hpcrm_name;
row.appendChild(cell1);
var cell2 = document.createElement("td");
//setElementText(cell2, (aResult.hpcrm_Percent == null) ? "" : aResult.hpcrm_Percent);
//cell2.innerText = aResult.hpcrm_Percent;
cell2.innerHTML = "<INPUT onchange=\"javascript:changeContent('cell2" + i + "');\" id=\"cell2" + i + "\" type=text value=\"" + aResult.hpcrm_Percent + "\">";
//cell2.firstChild.focus();
//alert(cell2.innerText);
row.appendChild(cell2);
recordsGrid.appendChild(row);
}
}
function oncomplete() {
//OnComplete handler
}
function changeContent(tablecell) {
debugger;
var cell = document.getElementById(tablecell);
alert(cell.value);
}
function submitNewName(textfield) {
alert(textfield.value);
textfield.parentNode.innerHTML = textfield.value;
}
function errorHandler(error) {
writeMessage(error.message);
}
function changeimg() {
alert("hi");
}
</script>
</head>
<body>
<div align="center">
<select id="listimg" onchange="changeimg()">
<option value="image1">Percent</option>
<option value="image2">Number</option>
</select>
</div>
<div id="tableContainer">
<table id="recordsTable" rules="groups" summary="This table displays the records retrieved.">
<tbody id="recordsGrid" />
</table>
</div>
</body>
</html>
