为什么单击按钮时我的隐藏表没有显示？
[英]Why is my hidden table not being revealed on button click?
问题描述
I created a table that has its display value initially set to none within the css.
我创建了一个表，它的显示值最初在 css 中设置为 none。 In my JavaScript code I created a function that should reveal this table.在我的 JavaScript 代码中，我创建了一个应该显示此表的函数。 After this function, I added an event listener to a button to execute the function on click.在此函数之后，我向按钮添加了一个事件侦听器，以在单击时执行该函数。 Although, the table is not displayed.虽然，该表不显示。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>App Decision Recommendation</title>
<link href='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/css/bootstrap.css' rel='stylesheet'>
<script src='http://lmgrintranet02/jsfiles/jquery/jquery-3.2.1.min.js'></script>
<script src='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/js/bootstrap.min.js'></script>
</head>
<style>
#inputNotes{width: 413px; font-family: 'Courier New', Courier, monospace;} /*This pixel width only allows for 40 characters per line*/
#resultTable {width: 50%; display:none;}
</style>
<script>
function loadTable(){
// TODO
}
function showTable(){
document.getElementById('resultTable').style.display="block";
}
var btn = document.getElementById("okBtn");
btn.addEventListener("click",loadTable);
btn.addEventListener("click",showTable);
</script>
<body>
<div class="card">
<div class="card-header"><h4>App Decision Recommendation</h4></div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col">
<label for="inputGroupSelect" class="form-label">Application</label>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect">
<option selected>Choose...</option>
<option value="1">Approve</option>
<option value="2">Counter</option>
<option value="3">Decline</option>
</select>
</div>
</div>
<div class="col">
<label for="inputApprovalAmount" class="form-label">Approval Amount</label>
<input type="text" id="inputApprovalAmount" class="form-control" aria-describedby="approvalAmount-input">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="inputProcessorCode" class="form-label">Processor Code</label>
<input type="text" id="inputProcessorCode" class="form-control" aria-describedby="processorCode-input">
<label for="inputGroupSelect" class="form-label mt-4">Recommended Decision</label>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect">
<option selected>Choose...</option>
<option value="1">Approve</option>
<option value="2">Counter</option>
<option value="3">Decline</option>
</select>
</div>
</div>
<div class="col">
<label for="inputNotes" class="form-label">Notes</label>
<textarea class="form-control" id="inputNotes" rows="3" cols="40" wrap="hard"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col">
</div>
<div class="col mt-4">
<button type="button" class="btn btn-primary" id="okBtn">OK</button>
</div>
</div>
</div>
<div class="container mt-4" id="resultTable">
<table class="table table-bordered">
<tr>
<td colspan="2">Loan App 3092</td>
</tr>
<tbody>
<tr>
<th scope="row">Processor Code</th>
<td>0023</td>
</tr>
<tr>
<th scope="row">Approval Amount</th>
<td>$4000.00</td>
</tr>
<tr>
<th scope="row">Recommended Decision</th>
<td>Approve</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Any help is appreciated, thanks!任何帮助表示赞赏，谢谢！
3 个解决方案
解决方案1
0 2021-10-18 20:37:35
You have to fix the importation of bootstrap.您必须修复引导程序的导入。
I change link from thegetting started of bootstrap docs.我从引导程序文档的入门开始更改链接。
For me, everything is fine:对我来说，一切都很好：
function loadTable(){ // TODO } function showTable(){ document.getElementById('resultTable').style.display="block"; } var btn = document.getElementById("okBtn"); btn.addEventListener("click",loadTable); btn.addEventListener("click",showTable);
#inputNotes { width: 413px; font-family: 'Courier New', Courier, monospace; } /*This pixel width only allows for 40 characters per line*/ #resultTable { width: 50%; display:none; }
<head> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="card"> <div class="card-header"><h4>App Decision Recommendation</h4></div> </div> <div class="container"> <div class="row mt-4"> <div class="col"> <label for="inputGroupSelect" class="form-label">Application</label> <div class="input-group mb-3"> <select class="custom-select" id="inputGroupSelect"> <option selected>Choose...</option> <option value="1">Approve</option> <option value="2">Counter</option> <option value="3">Decline</option> </select> </div> </div> <div class="col"> <label for="inputApprovalAmount" class="form-label">Approval Amount</label> <input type="text" id="inputApprovalAmount" class="form-control" aria-describedby="approvalAmount-input"> </div> </div> <div class="row mt-4"> <div class="col"> <label for="inputProcessorCode" class="form-label">Processor Code</label> <input type="text" id="inputProcessorCode" class="form-control" aria-describedby="processorCode-input"> <label for="inputGroupSelect" class="form-label mt-4">Recommended Decision</label> <div class="input-group"> <select class="custom-select" id="inputGroupSelect"> <option selected>Choose...</option> <option value="1">Approve</option> <option value="2">Counter</option> <option value="3">Decline</option> </select> </div> </div> <div class="col"> <label for="inputNotes" class="form-label">Notes</label> <textarea class="form-control" id="inputNotes" rows="3" cols="40" wrap="hard"></textarea> </div> </div> <div class="row mt-4"> <div class="col"> </div> <div class="col mt-4"> <button type="button" class="btn btn-primary" id="okBtn">OK</button> </div> </div> </div> <div class="container mt-4" id="resultTable"> <table class="table table-bordered"> <tr> <td colspan="2">Loan App 3092</td> </tr> <tbody> <tr> <th scope="row">Processor Code</th> <td>0023</td> </tr> <tr> <th scope="row">Approval Amount</th> <td>$4000.00</td> </tr> <tr> <th scope="row">Recommended Decision</th> <td>Approve</td> </tr> </tbody> </table> </div> </body>
解决方案2
0 2021-10-18 20:45:29
The code is fine.代码没问题。 Only one thing has struck me now.现在只有一件事让我印象深刻。 Put your javascript block at the bottom.将您的 javascript 块放在底部。 just before the closing body Tag.就在结束体标签之前。
解决方案3
0 2021-10-18 20:54:55
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>App Decision Recommendation</title>
<link href='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/css/bootstrap.css' rel='stylesheet'>
<script src='http://lmgrintranet02/jsfiles/jquery/jquery-3.2.1.min.js'></script>
<script src='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/js/bootstrap.min.js'></script>
</head>
<style>
#inputNotes{width: 413px; font-family: 'Courier New', Courier, monospace;} /*This pixel width only allows for 40 characters per line*/
#resultTable {width: 50%; display:none;}
</style>
<script>
function loadTable(){
// TODO
}
function showTable(){
document.getElementById('resultTable').style.display="block";
}
</script>
<body>
<div class="card">
<div class="card-header"><h4>App Decision Recommendation</h4></div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col">
<label for="inputGroupSelect" class="form-label">Application</label>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect">
<option selected>Choose...</option>
<option value="1">Approve</option>
<option value="2">Counter</option>
<option value="3">Decline</option>
</select>
</div>
</div>
<div class="col">
<label for="inputApprovalAmount" class="form-label">Approval Amount</label>
<input type="text" id="inputApprovalAmount" class="form-control" aria-describedby="approvalAmount-input">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label for="inputProcessorCode" class="form-label">Processor Code</label>
<input type="text" id="inputProcessorCode" class="form-control" aria-describedby="processorCode-input">
<label for="inputGroupSelect" class="form-label mt-4">Recommended Decision</label>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect">
<option selected>Choose...</option>
<option value="1">Approve</option>
<option value="2">Counter</option>
<option value="3">Decline</option>
</select>
</div>
</div>
<div class="col">
<label for="inputNotes" class="form-label">Notes</label>
<textarea class="form-control" id="inputNotes" rows="3" cols="40" wrap="hard"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col">
</div>
<div class="col mt-4">
<button type="button" class="btn btn-primary" onclick="showTable();" id="okBtn">OK</button>
</div>
</div>
</div>
<div class="container mt-4" id="resultTable">
<table class="table table-bordered">
<tr>
<td colspan="2">Loan App 3092</td>
</tr>
<tbody>
<tr>
<th scope="row">Processor Code</th>
<td>0023</td>
</tr>
<tr>
<th scope="row">Approval Amount</th>
<td>$4000.00</td>
</tr>
<tr>
<th scope="row">Recommended Decision</th>
<td>Approve</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么这些div无法隐藏和显示？ - Why do these divs not get hidden and revealed?
Facebook开放图表 - '喜欢按钮' - 隐藏的内容透露在'喜欢'上 - Facebook Open Graph - 'Like Button' - Hidden Content Revealed Upon 'Like'
为什么不触发我的按钮单击事件？ - Why isn't my button click event being triggered?
为什么我的课程没有在按钮点击时添加？ - Why aren't my classes being added on button click?
为什么在我的猫鼬模式中单击按钮时没有更新喜欢？ - Why are likes not being updated on button click in my mongoose schema?
当我单击“显示更多”按钮时，为什么类 - .menu-hidden 没有被删除 - Why is the class - .menu-hidden not being removed when i click the Show more button
DIV中显示的“关闭”按钮在第一次单击（或点击）时不响应 - Revealed Close button in DIV not responsive on first click (or tap)
如何在显示时启动我的 td 并在单击时显示它们 - How to start my td's as revealed and unreveal them on click
为什么我的 - Why is my <i> tag being appended multiple times for each click as I click the add button?
为什么用跨度来处理“单击，按钮”呢？ - Why is an on “click, ”button" being handled by a span instead?
相关标签