javascript - 添加带有生成表函数调用的按钮

Question

我用来自 JSON 数据源的 jquery 填充表格

var data = dataJSONMOV, 
           fragment = document.createDocumentFragment(),
            tr, td, i, il, key;

for(i=0, il=data.length;i<il;i++) {
    tr = document.createElement('tr');
    for(key in data[i]) {
         td = document.createElement('td');
         td.appendChild( document.createTextNode( data[i][key] ) );
         tr.appendChild( td );
    }
    //Button generation code should go here (see below)
    fragment.appendChild( tr );
}
$('#mytable tbody').append( fragment.cloneNode(true) );

我想在每一行的末尾添加一个按钮，该按钮调用一个函数 displayInformation(string ID)，该函数的参数来自该行的第一列。

我怎样才能做到这一点？

我用这段代码试过了，但它没有显示任何按钮

 //Button generation code
 var btn = document.createElement('input');
 btn.type = "button";
 btn.className = "btn";
 btn.value = data[i][0];
 btn.onclick = (getTestAlert(data[i][0]));
 tr.appendChild(btn);

Answer 1

关于如何添加按钮，您的方向是正确的。您可以添加它，他们会向表中添加一个事件监听器:

$('#mytable').on("click", "input", function() {
});

// Or 

$('#mytable').on("click", "input", getTestAlert);

所以，要知道它属于什么id，添加一个data attribute :

var btn = document.createElement('input');
btn.dataset.id = data.id;

以及如何检索它:

$('#mytable').on("click", "button", function() {
    var id = $(this).data("id"); // For jQuery
        id = this.dataset.id; // For vanilla
});

你的循环可能会这样结束:

for(i=0, il=data.length;i<il;i++) {
    tr = document.createElement('tr');
    for(key in data[i]) {
         td = document.createElement('td');
         td.appendChild( document.createTextNode( data[i][key] ) );
         tr.appendChild( td );
    }

    // Add button in last column
    var btn = document.createElement('input');
    btn.type = "button";
    btn.className = "btn";
    btn.value = data[i][0];
    btn.onclick = (getTestAlert(data[i][0]));
    tr.appendChild(btn);

    fragment.appendChild( tr );
}

Working demo

此外，我不知道这是否是某种要求，但如果您使用 jQuery，则应该在整个代码中使用它，就像创建元素一样。在某些浏览器中创建元素可能很奇怪，jQuery 会处理它。如果您有兴趣，您的代码应该是这样的:

var data = dataJSONMOV, 
           fragment = document.createDocumentFragment(),
           key, html = "";

for(var i=0, il=data.length;i<il;i++) {
    html+= "<tr>";
    for(key in data[i]) {
         html+= "<td>" + data[i][key] + "</td>";
    }

    html+= "<td><input type='button' class='btn' value='Click me' data-id='" + data[i].id + "' /></td></tr>";
}

$("#mytable").append(html);

很短吧？