添加带有generatet表函数调用的按钮

时间:2016-01-11 15:48:54

标签: javascript jquery html-table

我从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) );

我想在每一行的末尾添加一个按钮,该按钮使用该行的第一个coloumn中的参数调用函数 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);

2 个答案:

答案 0 :(得分: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);

很简短,呵呵?

答案 1 :(得分:1)

因为您要动态填充表,所以需要根据html中定义的某个父级添加一个单击侦听器。假设&#39; #myTable tbody&#39;并且可以通过.text()访问displayInformation()所需的该行的第一列中的参数,您可以使用

$(document).ready(function() {
  $('#myTable tbody').on('click', 'input[type="button"]', function() {
    displayInformation($('td:first-child', $(this).parents('tr')).text());
  });
});

为行的按钮创建点击监听器。