Javascript 在表中的特定位置插入行

我有一个带有表格的页面，第一行来自下面的代码

                <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>

名字：
@Html.TextBoxFor（model=>model.personArray[0].firstName，新的{id=“firstName”}）
中间字首：
@Html.TextBoxFor（model=>model.personArray[0].middleInitial，新的{id=“middleInitial”}）
姓氏：
@Html.TextBoxFor（model=>model.personArray[0].lastName，新的{id=“lastName”}）

单击“添加”按钮时，将插入新行。但是，该行插入到表的底部。如何将该行紧跟在第一行之后

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);


    };

函数addRow（索引）{
$（'#addButton'+index）.attr（“已禁用”，true）；
var计数器=++指数；
var content=`名字：
中间字首：
姓氏：
`;
$（'#addRow'）。追加（内容）；
};

这是一个普通的JS解决方案。可以使用来指示新内容相对于特定元素的位置

我在

tbody

中选择了第一个

tr

，并将新内容放在该行的末尾

document.querySelector('#addRow > tr')
        .insertAdjacentHTML("afterend", content);

使用：

---

回答您提出的问题：您在

$（“#addRow tr:first”）上使用
：

但是，正确的方法是将表拆分为一个（可能是包含而不是
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">

请尝试以下代码：

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);

  $(content).insertAfter($("#addRow > tr").eq(index-1)); // Key line

函数addRow（索引）{
$（'#addButton'+index）.attr（“已禁用”，true）；
var计数器=++指数；
var content=`名字：
中间字首：
姓氏：
`;
//$（'#addRow'）。追加（内容）；
$（content）.insertAfter（$（“#addRow>tr”）.eq（index-1））；//键行

})
 
thead
绝对是一条全面的道路。
<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">

$('#addRow').prepend(content);

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);

  $(content).insertAfter($("#addRow > tr").eq(index-1)); // Key line