如何在两个 tr 之间添加 tr 或任何 html 标记

Question

以下是我正在使用的html，我想在前两个trs之间添加一个tr，但它不起作用。我想添加一个 html 标签并为前两个 tr 包含一个类。我怎样才能做到这一点？我不想在其中包含提交按钮的 tr。

<table cellspacing="0" id="content-space" class="content-space">

<tr>
  <td>
    Subscription Plan:
  </td>
  <td>
    <select id="PlanNameId" style="width:auto !Important" name="data[][PlanNameId]">
      <option value="4">
        Disable
      </option>
      <option selected="selected" value="2">
        Free
      </option>
      <option value="1">
        Bronze
      </option>
    </select>
  </td>
  <td>
    &nbsp;
  </td>
</tr>

<tr>
  <td>
    Auto Upgrade:
  </td>
  <td>
    <select id="SubscriptionSetting" name="data[][SubscriptionSetting]">
      <option value="1">
        Yes
      </option>
      <option selected="selected" value="0">
        No
      </option>
    </select>
  </td>
  <td>
    &nbsp;
  </td>
</tr>
<tr>
  <td colspan="2" class="signin-button-containers">
    <input type="submit" value="Submit" id="subscriptionsubmit" class="primaryLargeButton">
  </td>
</tr>

Answer 1

您可以简单地获取第一个tr，然后在它后面插入新行。使用jQuery，这非常简单，但是无需任何库，也可以毫不费力地完成。

$("table tr").first().after("<tr><td>Inserted data</td><td>More data in between</td></tr>")

示例：http://jsfiddle.net/qnu3c0uk/1/

Answer 2

给定：

<table>
    <tr>
        <td>Text</td>
    </tr>
    <tr>
        <td>Text 2</td>
    </tr>
<table>

并且您想在第一个表格行之后插入一个表格行（带有单元格），我会这样做：

$("table tr:first-of-type").after($("<tr>").append("<td>"));

如果您想在第一行和新行中添加一个类，我会这样做：

$("table tr:eq(0),table tr:eq(1)").addClass("row-class");

或者实际上将这两个部分结合起来：

var $newRow = $("<tr>").addClass("new-class");
var $firstRow = $("table tr:first-of-type").addClass("new-class");
$firstRow.after($newRow.append("<td>"));