Add col to the colgroup of html table in run time

Question

I have define the table with the following code snippet.

<div class="gridheadercontainer">
        <table class="table" cellspacing="0">
            <colgroup>
                <col style="width: 150px;">
                <col style="width: 150px;">
                <col style="width: 150px;">
                <col style="width: 150px;">
                <col style="width: 150px;">
            </colgroup>
           <thead>
           <tr class="columnheader" style="cursor: pointer;">
               <th class="headercell"><div class="headercelldiv">Task name</div></th>
               <th class="headercell"><div class="headercelldiv">Start time</div></th>
               <th class="headercell"><div class="headercelldiv">End time</div></th>
               <th class="headercell"><div class="headercelldiv">Duration</div></th>
               <th class="headercell"><div class="headercelldiv">Status</div></th>
               <th class="headercell"><div class="headercelldiv"></div></th>
           </tr>
          </thead>
            <tbody class="hide"><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody>
        </table>
    </div>

In this case I have use the following code snippet to append the col to the colgroup of table.

$('.gridheadercontainer table colgroup').prepend(doc.createElement('col'));

But it will add the column in the 0th index. How to the col to the last of the colgroup table

Answer 1

你的意思是append（）

$('.gridheadercontainer table colgroup').append(doc.createElement('col'));