Hi Guys,
I would like to ask help figuring out as to why my table click event is inconsistent. Sometimes it work sometimes it doesnt. Appreciate the help thanks!
<!-- Table HTML -->
<table id="colTable" border="1" >
<thead>
<tr>
<th >ColumPosition</th>
<th >ColumName</th>
<th >DataType</th>
<th >Popularity</th>
<th >Usage</th>
<th >Range</th>
<th >Composition</th>
</tr>
</thead>
<tbody id="testBody"></tbody>
</table>
//Jquery for populating the data from array into the html table above. This is declared in //jquery document ready portion.
for (a=0;a<data.length;a++){
htmlVar = "<tr> <td>" + data[a].field1 + "</td>" ;
htmlVar += "<td>" + data[a].field2 + "</td>" ;
htmlVar += "<td placeholder = \"" + a + "\" class=\"expColTable\">" + data[a].field3 +"<br>";
htmlVar += "<div id=\"nes" + a +"\" >" +
"<table>" +
"<thead>"+
"<tr>" +
"<th>ColumnName</th>" +
"</tr>" +
"</thead>" ;
for (b=0;b<2;b++){
htmlVar += "<tbody>" +
" <tr >" +
"<td >" + nesteddata[a].nestedfield + "</td>" +
"</tr>" +
"</tbody>";
}
htmlVar += "</table></div></td>" +
"</tr>" ;
$('#colTable').append(htmlVar);
$('#nes' + a).hide();
}
// Jquery for triggering div hide and show by table classname "expColTabl".
$(".expColTable").click(function(event) {
event.preventDefault();
var text = $(this).attr('placeholder');
if ($('#nes' + text).is(':visible'))
{
$('#nes' + text).hide();
}
else
{
$('#nes' + text).show();
}
});
