I'am having HTML Control with table.
var oHtmlChange = new sap.ui.core.HTML({
content: "<div class=tg-wrap ><table id=myTable class=tg > <tr> <td colspan= 2 >DA-18</td> <td colspan= 2 >DA-28</td> <td colspan= 2 >DA-38</td> <td class=noborder ></td> <td colspan= 2 >TDA-68</td> <td colspan= 2 >TDA-88</td> <td colspan= 2 >TDA-98</td> </tr> <tr> <td colspan= 2 >DB-18</td> <td colspan= 2 >DB-28</td> <td colspan= 2 >DB-38</td> <td class = noborder></td> <td colspan= 2 >DB-68</td> <td colspan= 2 >DB-88</td> <td colspan= 2 >DB-98</td> </tr> <tr> <td colspan= 2 >DD-18</td> <td colspan= 2 >DD-28</td> <td colspan= 2 >DD-38</td> <td class = noborder></td> <td colspan= 2 >DD-68</td> <td colspan= 2 >DD-88</td> <td class = noborder></td> <td class = noborder></td> </tr> <tr> <td class=noborder ></td> <td class=noborder></td> <td class=noborder ></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> </tr> <tr> <td colspan= 2 rowspan= 2 >FA-18</td> <td colspan= 2 rowspan= 2 >FA-28</td> <td colspan= 2 rowspan= 2 >FA-38</td> <td class = noborder></td> <td colspan= 2 rowspan= 2 >FA-68</td> <td colspan= 2 rowspan= 2 >FA-88</td> <td colspan= 2 rowspan= 2 >FA-98</td> </tr> <tr> <td class = noborder></td> </tr> <tr> <td class = noborder></td> <td class = noborder></td> <td colspan= 4 >FB-18</td> <td class = noborder></td> <td colspan= 4 >FB-28</td> <td class = noborder></td> <td class = noborder></td> </tr> <tr> <td colspan= 2 rowspan= 2 >FD-18</td> <td colspan= 2 rowspan= 2 >FD-28</td> <td colspan= 2 rowspan= 2 >FD-38</td> <td class = noborder></td> <td colspan= 2 rowspan= 2 >FD-68</td> <td colspan= 2 rowspan= 2 >FD-88</td> <td colspan= 2 rowspan= 2 >FD-98</td> </tr> <tr> <td class = noborder></td> </tr> <tr> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> </tr> <tr> <td >SA-18</td> <td >SA-28</td> <td >SA-38</td> <td >SA-68</td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> </tr> <tr> <td >SB-18</td> <td >SB-28</td> <td >SB-38</td> <td >SB-68</td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> <td class = noborder></td> </tr> </table></div>"
});
oHtmlChange.placeAt('content');
How could I trigger click event on each cell? I've followed the post how-to-trigger-click-event-for-html-anchor-tag-on-xml-view-sap-ui5 but was still not able to trigger my event. Do I need to create a unique Id for each of the cell? Any help would much appreciated.
jQuery's on should sort you out.
$(document).on("click", "#myTable td", function(event) {
console.log($(this).text());
});
It should bind to elements that are dynamically added, so setting or changing your HTML should make no difference. Change the selector to suit your needs, obviously. The code above binds to the cells in your table.