CODEWITHSUNDEEP
htmlhtml-table
user123456
user123456

Reputation: 95

How to add tr or any html tag between two tr

Following is the html that I am using I want to add one tr between first two trs but it is not working. I want to add a html tag and include class for first two tr. How can I achieve that? I do not want to include the submit button's tr in it. 

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

Upvotes: 0

Views: 1863

Answers (2)

Hydrospanners
Hydrospanners

Reputation: 195

Given: 

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

And that you want to insert a table row (with a cell) after the first table row i would do:

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

If you then want to add a class to the first and the new row, i would do: 

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

Or actually combining the two parts to:

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

Upvotes: 0

icke
icke

Reputation: 1578

You can simply get the first tr and then insert the new row right after it. With jQuery this is very easy, but without any libraries it can also be done without too much effort. 

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

Example: http://jsfiddle.net/qnu3c0uk/1/

Upvotes: 1

Related Questions