我正在第5列中创建带有按钮的表格。当用户单击表的行时,该按钮应首先可见。我在设置可见性时遇到了麻烦。...
这是我的代码:
for (var i = dataRaw.length; i > 0; i--) {
var r = dataRaw[i-1];
var row = table.insertRow(0);
row.id = r[0];
for (var x = 0; x < r.length; x++) {
if (i === 1) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = r[x];
row.appendChild(headerCell);
} else {
var cell = row.insertCell(x);
if (x === 5) {
var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.id = r[0].toString();
btn.value = "Vis";
btn.style.backgroundColor = '#428bca';
btn.style.color = 'white';
btn.style.visibility = "hidden";
cell.appendChild(btn);
}
else {
cell.innerHTML = r[x];
}
}
}
}
我在桌子上有这个侦听器:
$(function () {
$('#errorTable').on('click', 'tr', function () {
var requestID = this.id;
document.getElementById(requestID).style.visibility = 'visible';
该按钮在开始时处于“隐藏”状态,但是我无法再次显示它。
答案 0 :(得分:0)
假设每行都有一个按钮,或者您要隐藏行内的第一个按钮\
$('#errorTable').on('click', 'tr', function () {
//document.getElementById(requestID).style.visibility = 'visible';
$(this).find('button').first().hide();
// or if you set your buttons as INPUTS:
$(this).find('input[type=button]').first().hide();
}
注意:此方法不需要单击的行的唯一ID。除非您想将其中继回服务器。
您生成按钮的代码也可以使用一些修改:
if (x === 5) {
var btn = $('<input>')
.attr("type","button")
.attr("id",r[0].toString())
.attr("value","Vis")
.css("background-color","#428bca")
.css("color","white")
.css("display","none") // initially hidden
.addClass("btn");
btn.appendTo($(cell));
}
如注释中所述,要再次切换按钮的可见性,由于这里只有一个具有该ID的元素,因此无需调用.first()
。
$("#" +requestID+ "btn").show();