Inserting THEAD element into embedded HTML using jQuery

Question

I'm trying to use jQuery to insert HTML into a table element. I've been messing variations of the selector (below) with no luck. Can someone help me?

My Selector:

$j('#ctl00_body_gridData_dom').children('table:first').append("<thead><tr><td colspan='6'>&nbsp;</td><td align='center' colspan='7'>EM SPECS</td><td align='center' colspan='7'>FISH</td><td colspan='11'>&nbsp;</td></tr></thead>");

Here's what I am trying to do...

I want to insert this:

<thead>
<tr>
    <td colspan="6">
        &nbsp;
    </td>
    <td align="center" colspan="7">
        EM SPECS
    </td>
    <td align="center" colspan="7">
        FISH
    </td>
   <td colspan="11">
        &nbsp;
    </td>
</tr>
</thead>

The sample below is what I want the end result to look like...

So It Looks Like This: Jquery Event Pool

<table id="ctl00_body_gridData" style="width: 2000px; -moz-user-select: none;" border="1" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td id="ctl00_body_gridData_dom" class="GridData" style="vertical-align: top; height: 245px;" valign="top">
        <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
                <td colspan="6">
                    &nbsp;
                </td>
                <td align="center" colspan="7">
                    EM SPECS
                </td>
                <td align="center" colspan="7">
                    FISH
                </td>
               <td colspan="11">
                    &nbsp;
                </td>
            </tr>
          </thead>
          <tbody>
            <tr id="ctl00_body_gridData_top_head" class="headerlineGrid">
              <td width="16">
                <div style="width: 16px;"></div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,4,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,4,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,0,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,4,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,4,0)" style="width: 89px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 89px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Work<br>Package</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,6,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,6,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,1,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,6,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,6,0)" style="width: 62px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 62px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Work<br>Order</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,9,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,9,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,2,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,9,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,9,0)" style="width: 66px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 66px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          FCR<br>Group</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,12,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,12,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,3,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,12,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,12,0)" style="width: 105px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 105px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">Contractor</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,15,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,15,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,4,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,15,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,15,0)" style="width: 159px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 159px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Capital/Expense<br>Group</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,19,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,19,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,5,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,19,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,19,0)" style="width: 99px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 99px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">Cost Type</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,20,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,20,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,6,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,20,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,20,0)" style="width: 81px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 81px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Commit<br>Dollars</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,21,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,21,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,7,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,21,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,21,0)" style="width: 81px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 81px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Commit<br>Hours</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,22,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,22,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,8,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,22,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,22,0)" style="width: 86px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 86px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Commit<br>Quantity</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,23,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,23,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,9,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,23,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,23,0)" style="width: 76px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 76px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Control<br>Budget</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,24,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,24,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,10,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,24,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,24,0)" style="width: 46px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 46px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">FTC</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,25,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,25,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,11,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,25,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,25,0)" style="width: 88px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 88px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Total<br>Forecast</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,26,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,26,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,12,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,26,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,26,0)" style="width: 50px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 50px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Ctr<br>COB</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,27,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,27,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,13,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,27,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,27,0)" style="width: 49px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 49px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Ctr<br>CCB</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,28,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,28,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,14,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,28,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,28,0)" style="width: 81px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 81px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Ctr<br>
                            Commit<br>$</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,29,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,29,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,15,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,29,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,29,0)" style="width: 81px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 81px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Ctr<br>
                            Commit<br>Hours</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,30,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,30,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,16,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,30,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,30,0)" style="width: 86px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 86px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Ctr<br>
                            Commit<br>Quantity</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,31,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,31,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,17,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,31,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,31,0)" style="width: 95px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 95px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Ctr<br>% Compl.</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td onclick="ctl00_body_gridData.ClickHandler(event,this,32,0)" ondblclick="ctl00_body_gridData.DblClickHandler(event,null,32,0)" onmousemove="ctl00_body_gridData.MoveHandler(event,this,18,0)" onmouseover="ctl00_body_gridData.OverHandler(event,this,0)" onmouseout="ctl00_body_gridData.OutHandler(event,this,0)" onmousedown="ctl00_body_gridData.DownHandler(event,this,32,0)" onmouseup="ctl00_body_gridData.UpHandler(event,this,32,0)" style="width: 105px;" class="HeadingCell" align="center">
                <div style="text-align: center; overflow: hidden; width: 105px;">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="white-space: nowrap; text-align: center;" class="HeadingCellText" align="center">
                          Contractor<br>CFTC</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td id="ctl00_body_gridData_expcolgrp_0" width="16" align="center"></td>
              <td class="GroupHeading" colspan="20">
                FCR<br>Group: Engineering</td>
            </tr>
            <tr>
              <td id="ctl00_body_gridData_expcolgrp_1" width="16" align="center"></td>
              <td class="GroupHeading" colspan="20">
                FCR<br>Group: Pipe</td>
            </tr>
            <tr>
              <td id="ctl00_body_gridData_expcolgrp_2" width="16" align="center"></td>
              <td class="GroupHeading" colspan="20">
                FCR<br>Group: Concrete</td>
            </tr>
            <tr>
              <td id="ctl00_body_gridData_expcolgrp_3" width="16" align="center"></td>
              <td class="GroupHeading" colspan="20">
                FCR<br>Group: Insulation</td>
            </tr>
            <tr>
              <td id="ctl00_body_gridData_expcolgrp_4" width="16" align="center"></td>
              <td class="GroupHeading" colspan="20">
                FCR<br>Group: Buildings</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

</body>
</html>

Answer 1

Change your selected to be as follows:

  $('#ctl00_body_gridData_dom table:first').append("<thead><tr><td colspan='6'>&nbsp;</td><td align='center' colspan='7'>EM SPECS</td><td align='center' colspan='7'>FISH</td><td colspan='11'>&nbsp;</td></tr></thead>");