0

我正在使用 dojo domConstruct 动态创建表行。其中一列包含一个用于删除功能的按钮。但我不知道如何为删除按钮连接 onclick 事件。下面是我用于创建行的 js 代码。

domConstruct.place("<tr class='test'><td>" +
    " Account name"+ XXXX+" "+" Account number is is $" + data1 +
    "</td><td><input type ='button' onclick='deleteFunction(this);' value='remove' id=" +
    buttonId + "/></td></tr>","tradeInValue","");

所以现在我如何将它连接到

on(dom.byId("buttonId"),"click",function(){

// my code goes in here


});

我在这里不知道。基本上我需要通过单击按钮从表中删除该行。我在 javascript 文件中使用 dojo。

更新。

○

n(dom.byId("submitButton"), "click", function(evt){

        var name=registry.byId("name").get('value');
        var detail = registry.byId("manufacturer").get('value');
        var id=registry.byId("model").get('value');
        var make=registry.byId("shaft").get('value');

            var xhrArgs={
                    url:"./name/getValue",
                    content:{name:name,detail:detail,id:id,make:make},
                    handleAs:"json",
                    load:function(data){

                        var data1=data/100;
                        var row=domConstruct.create("tr",null,"tradeInValue");
                        domConstruct.create("td",{innerHTML:" Name
"+ detail+" "+id+"  Value is $"+data1},row);
                        var actions=domConstruct.create("td",null,row);
                        var btn=domConstruct.create("input",{
                            id:idRow,
                            type:"button",
                            value:"Remove"
                        },actions);

                        btn.addEventListener("click", function(evt) {
                              console.log("Deleting");
                              console.log(evt.target.parentNode.parentNode.idRow);
                              domConstruct.destroy(evt.target.parentNode.parentNode);
                            });

                        var test={ 
                                "name" : name,
                                "detail"  : detail,
                                "id" :id,
                                "tradePrice" :data,
                                "make":make

                        };

                        tradeDetails.clubDetails.push(test);

                        }
                    }



            var deferred=dojo.xhrPost(xhrArgs);

        }
    });
4

1 回答 1

1

最简单的方法是单独创建 DOM 节点，例如：

var row = domConstruct.create("tr", null, "myData");
domConstruct.create("td", { innerHTML: person.id }, row);
domConstruct.create("td", { innerHTML: person.name }, row);
var actions = domConstruct.create("td", null, row);
var btn = domConstruct.create("input", {
  type: "button",
  value: "Remove"
}, actions);

这使您可以轻松地将事件处理程序附加到btn，同时仍然保留上下文并仍然可以访问您正在使用的数据，例如：

btn.addEventListener("click", function() {
  console.log("Deleting", person);  
});

要删除行本身，您可以使用该Event.target属性，它使您可以访问按钮节点本身。如果您使用该Node.parentNode属性，您最终可以访问该行本身，然后您可以使用删除它dojo/dom-construct::destroy()

例如：

btn.addEventListener("click", function(evt) {
  domConstruct.destroy(evt.target.parentNode.parentNode);
});

一个完整的例子可以在JSFiddle上找到。

于 2015-10-02T06:58:16.433 回答