gpt4 book ai didi

javascript - 如何在表中的最后一行之后添加行

转载 作者:行者123 更新时间:2023-11-28 04:47:53 25 4
gpt4 key购买 nike

表格包含隐藏的模板行和零个或多个可见数据行。在表的末尾有添加按钮,它应该将新的空行添加到表的末尾。

我试过了

function addVariablesRow() {
var t = document.getElementById("reportVariablesTable");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}

但它会在表的最后一行之前添加行。如何将最后一行之后的行添加到表中?

使用了 ASP.NET MVC4 应用程序、bootstrap 3 modal、jquery、jquery-ui。

html:

<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<table class="table table-condensed table-striped" id="reportVariablesTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Calculate</th>
</tr>
</thead>
<tbody>
<!-- first row is hidden add template row -->
<tr style='display:none'>
<td>
<input type="text" name="name">
</td>

<td>
<textarea name="valuetostore"></textarea>
</td>

<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest">Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>

<!-- other are visible data rows -->
<tr>
<td>
<input type="text" name="name" value="variable1">
</td>

<td>
<textarea name="valuetostore">a-b</textarea>
</td>

<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest" selected>Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
... remaining rows
</tbody>
</table>
<button onclick="addVariablesRow();">+</button>

</div>
</div>
</div>
</div>

更新

我需要克隆正文中第一个模板行并使新行可见。我试过:

function addVariablesRow() {
var $t = $("#reportVariablesTable");
var $row = $($t.find("tr")[1]);
var r = $row.clone();
r[0].style.display = "";
r.appendTo($t);
}

这是最好的代码吗?也许最好在正文中找到模板行?

最佳答案

正如您提到的 JQuery 是一个选项,您可以使用这样的东西:

function addVariablesRow() {
var $t = $("#reportVariablesTable");
var $row = $t.find("tbody tr").first();
var $newRow = $row.clone();
$newRow.appendTo($t).show();
}

关于javascript - 如何在表中的最后一行之后添加行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40227599/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com