单击SAPUI5 HTML控件的事件

时间:2018-02-28 03:03:13

标签: html-table sapui5

我正在使用HTML Control表。

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-to-trigger-click-event-for-html-anchor-tag-on-xml-view-sap-ui5,但仍无法触发我的活动。 我是否需要为每个单元格创建唯一的ID? 任何帮助将非常感谢。

1 个答案:

答案 0 :(得分:0)

jQuery的on应该把你排除在外。

$(document).on("click", "#myTable td", function(event) {
  console.log($(this).text());
});

它应该绑定到动态添加的元素,因此设置或更改HTML应该没有区别。显然,更改选择器以满足您的需要。上面的代码绑定到表中的单元格。

https://jsfiddle.net/drswctqm/