使用 javascript 在表格中添加新单元格答案

【问题标题】：adding a new cell to a table using javascript使用 javascript 在表格中添加新单元格
【发布时间】：2019-07-31 07:17:37
【问题描述】：

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

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

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

这是我的代码：

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

【问题讨论】：

ID 在 HTML 文档中必须是唯一的。您正在使用循环内输出的代码创建重复项。

标签： javascript asp.net-core asp.net-core-mvc

【解决方案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();
}

【讨论】：