keb*_*ger 1 html css model-view-controller jquery razor
我正在尝试创建一个动态表,其中表中的每一行都有一个"修改"按钮,弹出一个模式,其中有一个表单请求信息.
这是我目前的CSHTML代码:
<body>
<div id="container">
<h1>Fingerprint Tool</h1>
<form id="userIdForm" method="post">
Type in your UserId: <input name="userId" type="number" id="formUserId" />
<input type="submit" />
</form>
@if (Model != null)
{
<h2>List of Fingerprints for user</h2>
<div id="tableDiv">
<table class="fingerprintTable">
<thead>
<tr>
<th>User ID</th>
<th>Fingerprint ID</th>
<th>FingerprintGrant ID</th>
<th>PaymentType ID</th>
<th>Fingerprint</th>
<th>IsDeleted</th>
<th>Status ID</th>
<th>Created Date</th>
<th>Updated Date</th>
<th>Modify</th>
</tr>
</thead>
<tbody>
@foreach (var fingerprint in Model.Fingerprints)
{
<tr>
<td id="userId">@fingerprint.UserId</td>
<td id="fingerprintId">@fingerprint.FingerprintId</td>
<td id="fingerprintGrantId">@fingerprint.FingerprintGrantId</td>
<td id="paymentTypeId">@fingerprint.PaymentTypeId</td>
<td id="fingerprint">@fingerprint.Fingerprint</td>
<td id="isDeleted">@fingerprint.IsDeleted</td>
<td id="fingerprintStatusId">@fingerprint.FingerprintStatusId</td>
<td id="createdDate">@fingerprint.CreatedDate</td>
<td id="updatedDate">@fingerprint.UpdatedDate</td>
<td><button id="modifyButton" onclick="modifyFingerprintInfo(@fingerprint.FingerprintId);">Modify</button></td>
</tr>
}
</tbody>
</table>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<p id="modalHeader"></p>
</div>
</div>
}
</div>
</body>
这是我的JS文件:
window.onload = function() {
$(".modifyButton")
.click(function() {
modifyFingerprintInfo($(this).data("fpid"));
});
}
function modifyFingerprintInfo(fingerprintId) {
// call updateStatus hermes endpoint
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = $(".modifyButton");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target === modal) {
modal.style.display = "none";
}
}
$("#modalHeader").text("Update the status of FingerprintId " + fingerprintId);
}
这是我的CSS代码:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#container {
width: 100%;
position: absolute;
left: 4px;
}
问题是,当我单击每行中的"修改"按钮时,第一次单击时,没有任何反应,然后第二次单击它,但仅适用于第一行中的第一个按钮.最重要的是,例如,如果我单击第4行修改按钮,则不会发生任何事情,但是当我单击第1行修改按钮时,它会打印出第4行的详细信息.
我不确定发生了什么,所以任何帮助都将不胜感激!
您可以使用class而不是id识别多个元素.该id属性旨在用于单个元素,如果多个元素具有相同的属性id,则仅选择1.
其次,您不希望在click事件处理程序中设置click事件处理程序.我们马上做吧.
我看到你标记了这个问题jQuery所以你可以使用:
<button class="modifyButton" data-fpid="1111">Modify</button>
$(".modifyButton").click(function() {
$("#modalHeader").text("Update the status of FingerprintId " + $(this).data("fpid");
$("#myModal").show();
});
这表明通过使用id,只有第一个触发:
$("#button").click(function() {
alert($(this).text());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Clicked button ONE</button><br /><br />
<button id="button">Clicked button TWO</button><br /><br />
<button id="button">Clicked button THREE</button>这表明通过使用class,其中任何一个开火:
$(".button").click(function() {
alert($(this).data("fpid"));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-fpid="111">Clicked button ONE</button><br /><br />
<button class="button" data-fpid="222">Clicked button TWO</button><br /><br />
<button class="button" data-fpid="333">Clicked button THREE</button>| 归档时间： |
|
| 查看次数： |
4439 次 |
| 最近记录： |