我有一个带有表格的页面,第一行来自下面的代码
<tbody id="addRow">
<tr>
<td align="right" id="firstNameLabel">First Name:</td>
<td align="left">@Html.TextBoxFor(model => model.personArray[0].firstName, new { id = "firstName" })</td>
<td align="right" id="middleInitialLabel">Middle Initial:</td>
<td align="left">@Html.TextBoxFor(model => model.personArray[0].middleInitial, new { id = "middleInitial" })</td>
<td align="right" id="lastNameLabel">Last Name:</td>
<td align="left">@Html.TextBoxFor(model => model.personArray[0].lastName, new { id = "lastName" })</td>
<td><input type="button" class="btn btn-xs" onclick="addRow('0')" value="Add" id="addButton0" /></td>
</tr>
单击“添加”按钮时,将插入新行。但是,该行将插入表的BOTTOM。如何在第一行之后立即放置行?
使用Javascript:
function addRow(index) {
$('#addButton' + index).attr("disabled", true);
var counter = ++index;
var content = `<tr><td align="right">First Name:</td>
<td align="left"><input id="personArray_${counter}__firstName" name="personArray[${counter}].firstName" type="text" value=""></td>
<td align="right">Middle Initial:</td>
<td align="left"><input id="middleInitial" name="personArray[${counter}].middleInitial" type="text" value=""></td>
<td align="right">Last Name:</td>
<td align="left"><input id="lastName" name="personArray[${counter}].lastName" type="text" value=""></td>
<td><input type="button" class="btn btn-xs valid" id="addButton${counter}" onclick="addRow('${counter}')" value="Add" aria-invalid="false"></td></tr>`;
$('#addRow').append(content);
};
答案 0 :(得分:1)
这是一个普通的JS解决方案。您可以使用.insertAdjacentHTML
来指示新内容相对于特定元素的位置。
我已选择tr
中的第一个tbody
,并在该行结束后添加新内容。
document.querySelector('#addRow > tr')
.insertAdjacentHTML("afterend", content);
答案 1 :(得分:0)
使用.after():
$('tbody tr:first-child').after(content);
答案 2 :(得分:0)
回答您提出的问题:您在$('#addRow tr:first')
上使用after
:
$('#addRow tr:first').after(content);
但,执行此操作的正确方法是将表格拆分为thead
(可能包含th
而不是td
元素的行) tbody
:
<thead>
<tr>
<td align="right" id="firstNameLabel">First Name:</td>
<td align="left">@Html.TextBoxFor(model => model.personArray[0].firstName, new { id = "firstName" })</td>
<td align="right" id="middleInitialLabel">Middle Initial:</td>
<td align="left">@Html.TextBoxFor(model => model.personArray[0].middleInitial, new { id = "middleInitial" })</td>
<td align="right" id="lastNameLabel">Last Name:</td>
<td align="left">@Html.TextBoxFor(model => model.personArray[0].lastName, new { id = "lastName" })</td>
<td><input type="button" class="btn btn-xs" onclick="addRow('0')" value="Add" id="addButton0" /></td>
</tr>
</thead>
<tbody id="addRow">
然后您只需在tbody
上使用prepend
。
$('#addRow').prepend(content);
答案 3 :(得分:0)
请尝试以下代码:
import os
file_path = os.path.dirname(__file__)
f = open(file_path + "\\ecoli_data_transformed.txt”,”r”)
};