代码之家 › 专栏 › 技术社区 › Marc Wittmann

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

html-table jquery javascript

Marc Wittmann · 技术社区 · 10 年前

我用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(字符串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 回复 | 直到 10 年前

marc_s MisterSmith 9 年前

你在如何添加按钮上走对了方向。您可以添加它,然后他们将事件侦听器添加到表中:

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

// Or 

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

所以,要知道 身份证件 它属于,添加一个 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);

很短,嗯?

jacobpadkins 10 年前

因为您是动态填充表的,所以需要添加一个基于html中定义的父级的单击侦听器。假设这是“#myTable tbody”的情况,并且displayInformation()所需的该行第一列的参数可以通过.text()访问,则可以使用

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

为行的按钮创建单击侦听器。