使用javascript向表格添加新单元格

Question

我有一个名为拒绝的按钮，当它被点击时，它应该显示一个带有文本和另一个按钮的表单。

一切正常，除了它只向第一行添加一个单元格，无论拒绝按钮在哪里，或者是在第二行还是第三行，它都会在第一行之后显示新单元格。

我希望在单击拒绝按钮的同一行中添加小表单。

这是我的代码：

<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';
    }

Answer 1

您可以使用 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();
}