dropdown list inside the grid using javascript
drop down list inside the grid using java script i have successfully completed. i converted to thingworx and import successfull .but it not showing widget in mash up ...what is solution
this is my code
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>employee list</h1>
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th> </th>
<th>id </th>
<th>name</th>
<th>age </th>
<th>roll</th>
<th>gender</th>
</tr>
<tr>
<td><input type="checkbox" id="myCheck"/></td>
<td>001</td>
<td>santhosh</td>
<td>22</td>
<td>15</td>
<td><select id = "list" >
<option value = "male">male</option>
<option value = "female">female</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="myCheck"/></td>
<td>002</td>
<td>anusha</td>
<td>22</td>
<td>15</td>
<td><select id = "list" >
<option value = "male">male</option>
<option value = "female">female</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="myCheck"/></td>
<td>003</td>
<td>sreekanth</td>
<td>22</td>
<td>16</td>
<td><select id = "list" >
<option value = "male">male</option>
<option value = "female">female</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="myCheck"/></td>
<td>004</td>
<td>bharathi</td>
<td>22</td>
<td>15</td>
<td><select id = "list" >
<option value = "male">male</option>
<option value = "female">female</option>
</select>
</td>
</tr>
<!-- <input type="button" value="Get Selected" onclick="GetSelected()" /> -->
</table>
<br>
<button value="Display" onclick="PrintData()">Display</button>
<br>
<table id="myTable" border="0">
</table>
<script >
function PrintData() {
// getControls();
document.getElementById("myTable").innerHTML = "";
var table = document.getElementById("myTable");
var header = table.createTHead();
// Create an empty <tr> element and add it to the first position of <thead>:
var row1 = header.insertRow(0);
//var row1 = table.insertRow(0);
var cell11 = row1.insertCell(0);
var cell21 = row1.insertCell(1);
var cell31 = row1.insertCell(2);
var cell41 = row1.insertCell(3);
var cell51 = row1.insertCell(4);
cell11.innerHTML = "ID";
cell21.innerHTML = "NAME";
cell31.innerHTML = "AGE";
cell41.innerHTML = "ROLL";
cell51.innerHTML = "GENDER";
var ctlGridViewProducts = document.getElementById("Table1");
var rowCount = ctlGridViewProducts.rows.length;
//clear all current rows
// fnDeleteRows();
var id, name, age, roll, gender, selectedIndex, isChecked;
var currRow;
var c=0;
for (i = 1; i < rowCount; i++) {
currRow = ctlGridViewProducts.rows[i];
id = currRow.cells[1].innerText;
name = currRow.cells[2].innerText;
age = currRow.cells[3].innerText;
roll= currRow.cells[4].innerText;
//selectedIndex = currRow.cells[5].selectedIndex;
//subCategoryName = currRow.cells[5].childNodes[1].innerText;
//var e=currRow.cells[5].text;
//var myvalue=e.options[e.selectedIndex].value;
var e = currRow.cells[5].getElementsByTagName("select")[0];
var myValue = e.options[e.selectedIndex].value;
//isChecked = currRow.cells[0].childNodes[1].innerText;
//var checkBox = document.getElementById("myCheck");
var checkboxfinal=ctlGridViewProducts.getElementsByTagName("input");
if (checkboxfinal[i-1].checked) {
//document.getElementById("para").innerHTML ="ID:"+id+" Name:"+ame+" Age:"+age+" roll:"roll+"Gender:"+myValue+"";
//var para = document.createElement("p");
//var node = document.createTextNode("id:"+id+" name:"+name+"Age:"+age+"roll:"+roll+"Gender:"+myValue+"");
//para.appendChild(node);
//var element = document.getElementById("div1");
//element.appendChild(para);
c=c+1;
var table = document.getElementById("myTable");
var row = table.insertRow(c);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = id;
cell2.innerHTML = name;
cell3.innerHTML = age;
cell4.innerHTML = roll;
cell5.innerHTML = myValue;
}
}
}
</script>
</body>
</html>
output :
employee list
| id | name | age | roll | gender | |
|---|---|---|---|---|---|
| 001 | santhosh | 22 | 15 | ||
| 002 | anusha | 22 | 15 | ||
| 003 | sreekanth | 22 | 16 | ||
| 004 | bharathi | 22 | 15 |
| ID | NAME | AGE | ROLL | GENDER |
| 002 | anusha | 22 | 15 | female |