首页 > 代码库 > 动态给表格TD 添加单击事件

动态给表格TD 添加单击事件

2024-07-13 23:45:41   228人阅读

需求:项目中对原有的JQ框架表格功能要进行完善 实现 单元格单击编辑

思路:JS中遍历生成好的表格 动态给TD 添加单击事件.

问题:遍历添加时,给TD 加样式 加属性都可以 但是如果要加单击事件 死活加不上去.

 1 //文本控件模版 2 var textTemp = "<input type=\"text\" value=http://www.mamicode.com/{0} />"; 3 var RawData; //原始数据 4     //js控制列 可修改 5 $("tr", $.pdialog.getCurrent()).each(function () { 6     var TR = this; 7     //排除表头 8     if ($(TR).parent()[0].nodeName != "THEAD") { 9         var index = 0;10         $(TR).find("td").each(function () {11             var TD = this;12             //具体列13             if (index == 2 || index == 4 || index == 5) {14                 $(TD).css("cursor", "pointer");15                 //$(TD).click(function(){ alert(1); });16                 $(TD).attr("onclick", "javascript:TdEdit(this);");17             }18             index++;19 20         });21     }22 23 });24 25 function TdEdit(TD) {26     debugger;27     //取出原先单元格中的值28     RawData = http://www.mamicode.com/trim($(TD).find("div").html());29     //给单元格添加一个文本控件30     $(TD).find("div").html("");31     $(TD).find("div").html(textTemp.format(str));32     //光标设置焦点33     $(TD).find("input").foucs();34 35     $(TD).find("input").val(RawData);36     //添加失去焦点事件 删除文aaaaa本框 修改td下div内容37 }38

 

解决方法:机智的我 直接给TD.attr("onclick","javascript:TdEdit();"); 希望有更好的方法 后面再完善


联系
我们