Question

我正在使用名为 Tabulator 的javaScript库来尝试添加列，并允许用户能够在每一行中上传1个图像文件。

（我只使用JavaScript 不使用jQuery ），我看到了此链接https://github.com/olifolkerd/tabulator/issues/153 这很有帮助，但没有涵盖全部。

我已经尽力在每一行添加一个带有按钮的新列，但是我需要能够为每行添加某种ID，以便我可以选择它并将其连接到 Form strong>会将图像发布到我的后端服务器。

我找不到有关如何使用该库执行此操作的任何文档，但是我找到了一些答案，可以让我明白这一点。

var openButton = function(value, data, cell, row, options){ //plain text value var button ='<button>upload ID </button>'; button.addEventListener('click',function(){ console.log("button is working"); }); return button; };

我在控制台button.addEventListener is not a function上不断收到错误消息

Answer 1

您不能将事件侦听器附加到字符串值。

您需要首先通过将元素附加到另一个DOM元素的}来创建该元素。

然后，您将需要在文档本身上附加一个click事件侦听器，而不是在您动态创建的元素上附加一个事件，因为addEventListener仅适用于最初加载JavaScript时属于HTML树的元素。

.innerHTML

function add_button() {

var uid = "btn_" + document.querySelectorAll("button").length;
var button ='<button id='+ uid +'>upload ID </button>';
document.getElementById("buttons").innerHTML += button;


document.addEventListener('click',function(e){
    if(e.target && e.target.id== uid){
       console.log("button " + uid + " is working");
    }
});
}

add_button();
add_button();

Answer 2

我终于想通了

首先必须添加包含函数的变量

var the_Function = function(cell, formatterParams, onRendered){ //plain text value

  //var formA = '<form class="" action="/upload" method="post">'
  //var inputFn = '<input type="file" id="imgupload" />' ;
  //var uploadBtnn = '<button type="submit" id="OpenImgUpload">ID upload</button></form>'
//return uploadBtnn
return "<i class='fa fa-print'>function_trigger</i>";
};

然后我们必须将格式化程序添加到列的

table.addColumn({title:"ID", field: "ID" ,formatter:the_Function,width:100, align:"center",cellClick:function(e, cell){ 

//button's function for example 
var Btn = document.createElement('Button');
Btn.id = "Btn_Id";
console.log(Btn);


}

制表符在每一行中添加带有按钮的列

2 个答案: