如何将单元格动态添加到已定义的表中

Question

我有一个应用程序，可以向慈善机构捐赠房屋。

我正在使用一个只显示信息的表格，在我的页面底部我有一个总计，这只是看起来不漂亮的文本。

我宁愿连接到我的单元格，最好是在桌子的右下角。

除了 W3Schools 教程之外，我找不到任何可以帮助我做到这一点的东西，该教程添加一个带有按钮的新单元格，我不想要。

这是我的 HTML(旁注：我正在使用 C# 和 Razor(

@using (Html.BeginForm("Index", "Donations", FormMethod.Get))
{ <div>
        <fieldset>
            <table style="border:none">
                <tr>
                    <td><label class="editor-label">Search Address:</label></td>
                    <td id="searchBar1">@Html.TextBox("SearchStringAddress")</td>
                    <td><label class="editor-label">Search House ID:</label></td>
                    <td></td>
                    <td id="searchBar2">@Html.TextBox("SearchStringHouseNumber")</td>
                    <td>
                        <input type="submit" value="Search" />
                    </td>
                </tr>
               </table>
            @if (TempData["Error"] != null)
            {
                <div style="color:red">@TempData["Error"]</div>
            }

        </fieldset>
    </div>
        <h2>List of Donations</h2>
        <p>
            <u> @Html.ActionLink("Add New Donation", "Create")</u>
        </p>
        <table class="tftable" id="tftable">
            <tr>
                <th>
                    @Html.DisplayName("Church Name")
                </th>
                <th>
                    @Html.DisplayName("House ID")
                </th>
                <th>
                    @Html.DisplayName("House Address")
                </th>
                <th>
                    @Html.DisplayName("Type of Donation")
                </th>
                <th>
                    @Html.ActionLink("Date Recieved", "Index", new { sortOrder = ViewBag.DateSortParm })
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Amount)
                </th>
                <th>
                    @Html.DisplayName("TOTAL")
                </th>
            </tr>
            @if (Model != null)
            {
                foreach (var item in Model)
                {
                    {
                        runningTotal += item.Amount;
                    }
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Church.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.HouseId)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.House.AddressLine1)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TypeOfDonation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.DateRecieved)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Amount)
                        </td>

                    </tr>
                }
            }

        </table>

        <b>TOTAL: @runningTotal </b>
}

有什么办法可以做到这一点吗？

Answer 1

如果你被允许使用Javascript，你可以用普通的javascript将td元素添加到现有的表中：

var node = document.createElement("td");
var textnode = document.createTextNode("Some Text");
node.appendChild(textnode);
document.querySelector("table #row1").appendChild(node);

例如，您可以使用 fetch 或 xmlhttprequest 并查询服务器以获取数据，然后遍历返回的 json/xml/txt 以向表中添加新元素。