javascript - 使用 javascript 在表格中添加新单元格
问题描述
我有一个名为拒绝的按钮,当它被单击时,它应该显示一个带有文本和另一个按钮的表单。
一切正常,除了它只在第一行添加一个单元格,无论拒绝按钮在哪里,或者它是在第二行还是第三行,它都会在第一行之后显示新的单元格。
我希望将小表单添加到单击拒绝按钮的同一行中。
这是我的代码:
<table asp-controller="Home" asp-action="Pending" class="table table-bordered table-sm table-striped" id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>Status</th>
<th>Check Time</th>
</tr>
</thead>
<tbody id="demo">
@if (Model == null)
{
<tr>
<td colspan="7" class="text-center">No Model Data</td>
</tr>
}
else
{
@foreach (var p in Model)
{
<tr>
<td>@p.Id</td>
<td>@p.Email</td>
@if (@p.CheckOut == null)
{
<td>Offline</td>
<td>@p.CheckIn</td>
}
else
{
<td>Online</td>
<td>@p.CheckOut</td>
}
<td>
<button name="button" value="accept" asp-action="Accept" asp-route-id="@p.Id" class="btn btn-success">Accept Request</button>
<button id="re" class="btn btn-danger" data-id="@p.Id" onclick="fun()">Reject Request</button>
</td>
<td style="display:none;" id="comment">
<form >
<input type="text" name="newcomment" id="newcomment" />
<button name="button" value="reject" asp-action="Reject" asp-route-id="id" class="btn btn-primary">Comment</button>
</form>
</td>
</tr>
}
}
</tbody>
</table>
<script type="text/javascript">
function fun() {
document.getElementById("comment").style.display = 'block';
}
解决方案
您可以使用 JQuery 来显示 td 区域。
首先,修改这一行:
<button id="re" class="btn btn-danger" data-id="@p.Id" onclick="fun()">Reject Request</button>
到
<button id="re" class="btn btn-danger" data-id="@p.Id" onclick="fun(this)">Reject Request</button>
并修改您的 js 函数以找到td
当前按钮的下一个:
function fun(elem) {
$(elem).closest('td').next('td').show();
}
推荐阅读
- jquery - 如何在 vue.js 应用程序中使用 jQuery 脚本?
- sql - 将列转为行
- python - literal_eval 错误地解析整数
- amazon-web-services - 无法从 AWS Cognito 注销用户
- php - PHP - 如何使用 Twitter API 获取推文 ID
- c# - 使用 Linq 展平设备和仪表数据
- c# - 使用 C# 和 Linq-to-entities 映射复杂对象
- sql - 是否可以在 Case 语句中执行 Select 语句
- amazon-web-services - 在 AWS Beanstalk 上更改 Docker 引擎版本
- reactjs - 仅使用 Cocoapods 添加 RCTCameraRoll