我从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);
答案 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 );
}
此外,我不知道它是否有某种要求,但如果您使用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());
});
});
为行的按钮创建点击监听器。