表包含隐藏的模板行和零个或多个可见数据行。 在表的末尾有添加按钮,在表的末尾添加新的空行。
我试过
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);
}
这是最好的代码吗?也许最好在模板中找到第一个模板行?
答案 0 :(得分:3)
如你所说,JQuery是一个选项,你可以使用这样的东西:
function addVariablesRow() {
var $t = $("#reportVariablesTable");
var $row = $t.find("tbody tr").first();
var $newRow = $row.clone();
$newRow.appendTo($t).show();
}
答案 1 :(得分:2)
可以通过这样的jQuery来完成,
$('#reportVariablesTable tr:last').after('<tr>...</tr><tr>...</tr>');
您可以在after()方法中包含任何内容,只要它是有效的HTML,包括上面示例中的多行。
答案 2 :(得分:1)
var t = document.getElementById("reportVariablesTable");
var row = document.createElement("tr")
t.appendChild(row)
答案 3 :(得分:0)
$('#reportVariablesTable').find('tbody:last')
.append($('#reportVariablesTable')
.find('tbody:first').clone());