显示不同的表onClick
问题描述:
我有一对不同的表,所有这些表都是从MySQL DB动态构建的。我希望能够在表格之间切换,如果我使用选项卡或按钮,则无关紧要。显示不同的表onClick
这里是我的功能来建立我的表:
function load_pending() {
$.post(
"Returnsmedb.php",
function (response) {
var block = []
index = 0;
for (var item in response){
var objectItem = response[item];
var firstname = objectItem.fname;
var lastname = objectItem.lname;
var username = objectItem.uname;
var email = objectItem.email;
var deny = document.createElement("input");
deny.type = "checkbox";
deny.className = "chk";
deny.name = "deny";
deny.id = "deny";
var approve = document.createElement("input");
approve.type = "checkbox";
approve.className = "chk";
approve.name = "approve";
var moreinfo = document.createElement("input");
moreinfo.type = "checkbox";
moreinfo.className = "chk";
moreinfo.name = "moreinfo";
block.push(firstname);
block.push(lastname);
block.push(username);
block.push(email);
block.push(deny);
block.push(approve);
block.push(moreinfo);
dataset.push(block);
block = [];
}
var data = [" First Name", " Last Name "," User Name ", " Email "," Deny", "Approve", "More Information"]
tablearea = document.getElementById('usersTable');
table = document.createElement('table');
thead = document.createElement('thead');
tr = document.createElement('tr');
for (var i = 0; i < data.length; i++) {
var headerTxt = document.createTextNode(data[i]);
th = document.createElement('th');
th.appendChild(headerTxt);
tr.appendChild(th);
thead.appendChild(tr);
}
table.appendChild(thead);
for (var i = 0; i < dataset.length; i++) {
tr = document.createElement('tr');
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.appendChild(document.createElement('td'));
tr.cells[0].appendChild(document.createTextNode(dataset[i][0]));
tr.cells[1].appendChild(document.createTextNode(dataset[i][1]));
tr.cells[2].appendChild(document.createTextNode(dataset[i][2]));
tr.cells[3].appendChild(document.createTextNode(dataset[i][3]));
// tr.cells[4].appendChild(document.createTextNode(dataset[i][4]));
tr.cells[4].appendChild((dataset[i][4])); //
tr.cells[5].appendChild((dataset[i][5])); //
tr.cells[6].appendChild((dataset[i][6])); //
table.appendChild(tr);
}
tablearea.appendChild(table);
}, 'json'
);
}
这里是我的HTML:
<div id="wrap">
<br />
<br />
<h3>User Maintenance | Pending User Requests</h3>
<h4 class="welcome"></h4>
<hr />
<div class="colWrap">
<input type="button" id="Submit" value="Submit" onclick="deny(); approve(); info();">
<button class="tablinks" onclick="call some function">Pending Users</button>
<button class="tablinks" onclick="call some function">Awaiting Reply</button>
</div>
<input type="button" id="deny" value="Deny" onclick="deny()"> <input type="button" id="Approve" value="Approve" onclick="approve()"> <input type="button" id="info" value="More Information" onclick="info()"> -->
<br />
<br />
<div class="col1">
<!-- <div id = "thead"></div> -->
<div id="usersTable" class="tabcontent">
<div id="replyTable" class="tabcontent">
</div>
</div>
</div>
</div>
<script type="text/javascript">
我希望我能有一个按钮调用一个函数,使一个表显示然后隐藏另一个,但它似乎不工作。最简单的方法是什么?
提前致谢!
答
我结束了使用JQuery,类似于其他答案,但也有一些差异。另一方面的if语句似乎在抛弃,但他的回答指向了正确的方向。
这是我的HTML。
<div class="colWrap">
<input type="button" id="Submit" value="Submit" onclick="deny(); approve(); info();">
<button id="p_users"></button>
<button id="msg_sent"></button>
</div>
<br />
<br />
<!-- <div class="col1"> -->
<div id="usersTable" ></div>
<div id="replyTable" style = "display: none;"> </div>
<!-- </div> -->
</div>
还有我心爱的JQuery。
$(function() {
$("#msg_sent").click(function() {
var table = document.getElementById("replyTable");
$('#usersTable').hide('slow');
$('#replyTable').show('slow');
console.log(table);
});
});
$(function() {
$("#p_users").click(function() {
var table = document.getElementById("usersTable");
$('#usersTable').show('slow');
$('#replyTable').hide('slow');
console.log(table);
});
});
答
你可以使用一些jquery来隐藏和显示按钮点击表。
$(function() {
//Create a click function on whatever button you want to show and hide the tables with
$("#ShowHideTablesButton").click(function() {
var $Table1 = $("#Table1_ID");
var $Table2 = $("#Table1_ID");
//If table 1 is hidden, then show it and hide the other table or vise versa
if ($Table1.hasClass("hidden")) {
$Table1.show();
$Table2.hide();
}
else {
$Table2.show();
$Table1.hide();
}
});
});
你可以看到一些工作的例子是这样的位置:show/hide example
你也可以只填充选项卡中的表。
<div class="tab">
<button class="tablinks" onclick="showHideTable(event, 'Table1')">table1</button>
<button class="tablinks" onclick="showHideTable(event, 'Table2')">table2</button>
</div>
<div id="Table1" class="tabcontent">
<table>
<!--Content..-->
</table>
</div>
<div id="Table2" class="tabcontent">
<table>
<!--Content..-->
</table>
</div>
您可以在这里看到标签的工作示例:tabs example
您的HTML被剪切... – z3nth10n
我在顶部标签中添加了。上面的所有内容都不相关。 –