locked
How to add rows after table head and before tfoot when working with html table by jquery RRS feed

  • Question

  • User264732274 posted

    please give me some jquery code for adding rows after table head and before tfoot when working with html table.

    below is a sample table. i just need to add a table row by jquery after <thead> and

    also like to add a table row by jquery before  <tfoot>. please discuss with code for this issue. thanks

    <table class="webgrid-table" id="sampletable">
        <thead>
            <tr class="webgrid-header">
                <th scope="col">
                    <a href="http://localhost:13562/page1">ID ?</a>
                </th>
                <th scope="col">
                    <a href="http://localhost:13562/page1">First Name</a>
                </th>
                <th scope="col">
                    <a href="http://localhost:13562/page1">Last Name</a>
                </th>
                <th scope="col">
                    <a href="http://localhost:13562/page1">State Name</a>
                </th>
                <th scope="col">
                    <a href="http://localhost:13562/page1">City Name</a>
                </th>
                <th scope="col">
                    IsActive
                </th>
            </tr>
        </thead>
        <tfoot>
            <tr class="webgrid-footer">
                <td colspan="6">
                    <div id="content">
                        
                        <div id="pager">
                            <ul class="paginate pag5 clearfix">
                                <li class="single">Page 5 of 5 of 50</li>
                                <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">prev</a></li>
                                <li class="navpage"><a href="http://localhost:13562/SamplePager/Index">next</a></li>
                                <li><a href="http://localhost:13562/SamplePager/Index">1</a></li>
                                <li><a href="http://localhost:13562/SamplePager/Index">2</a></li>
                                <li><a href="http://localhost:13562/SamplePager/Index">3</a></li>
                                <li><a href="http://localhost:13562/SamplePager/Index">4</a></li>
                                <li><a href="http://localhost:13562/SamplePager/Index">5</a></li>
                                <li class="current">6</li>
                                <li class="navpage"><a href="">next</a></li>
                                <li class="navpage"><a href="">last</a></li>
                                <li class="single"><div id="loader">Loading....</div></li>
                            </ul>
                        </div>
    
                        
                    </div>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr class="webgrid-row-style">
                <td class="SmallCols">1</td>
                <td class="NameColWidth">Amit</td>
                <td class="NameColWidth">Ghosh</td>
                <td class="NameColWidth">West Bengal</td>
                <td class="NameColWidth">Kolkata</td>
                <td class="text-center checkbox-width SmallCols">
                    <input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
                </td>
            </tr>
            <tr class="webgrid-alternating-row">
                <td class="SmallCols">2</td>
                <td class="NameColWidth">Tridip</td>
                <td class="NameColWidth">Bhattacharjee</td>
                <td class="NameColWidth">Bihar</td>
                <td class="NameColWidth">DharBganga</td>
                <td class="text-center checkbox-width SmallCols">
                    <input type="checkbox" id="select" class="box" name="select" checked="'checked'" value="True">
                </td>
            </tr>
        </tbody>
    </table>

    thanks

    Tuesday, January 5, 2016 8:37 AM

Answers

  • User61956409 posted

    Hi sudip_inn,

    You could try to use jQuery .after() method to insert content after each matched element. The following sample code is for your reference.

    <table>
        <thead>
            <tr>
                <td>column1</td>
                <td>column2</td>
            </tr>
        </thead>
    
        <tfoot>
            <tr>
                <td colspan="2">Footer</td>
            </tr>
        </tfoot>
    </table>
    
    <script>
        $(function () {
            var newrow = "<tr><td>data1</td><td>data1</td></tr>";
            $("table thead").after(newrow);
        })
    </script>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 7:45 AM

All replies

  • User503812343 posted

    add tbody after thead tag  and then use below code

    <table class="webgrid-table" id="sampletable">
        <thead>
        <thead>
         <tbody>
         <tbody>
    </table>
    
     var rows = "<tr>"
                    + "<td class='customertd'>" + item.CustomerID + "</td>"
                    + "<td class='customertd'>" + item.CompanyName + "</td>"
                    + "<td class='customertd'>" + item.ContactName + "</td>"
                    + "<td class='customertd'>" + item.ContactTitle + "</td>"
                    + "<td class='customertd'>" + item.City + "</td>"
                    + "<td class='customertd'>" + item.Phone + "</td>"
                    +"</tr>";
                    $('#tblCustomers tbody').append(rows);



    Tuesday, January 5, 2016 11:57 AM
  • User61956409 posted

    Hi sudip_inn,

    You could try to use jQuery .after() method to insert content after each matched element. The following sample code is for your reference.

    <table>
        <thead>
            <tr>
                <td>column1</td>
                <td>column2</td>
            </tr>
        </thead>
    
        <tfoot>
            <tr>
                <td colspan="2">Footer</td>
            </tr>
        </tfoot>
    </table>
    
    <script>
        $(function () {
            var newrow = "<tr><td>data1</td><td>data1</td></tr>";
            $("table thead").after(newrow);
        })
    </script>
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 7:45 AM
  • User264732274 posted

    thanks for your code but you have not shown how to add rows just before toof

    can i use this below code to add rows just before toof.........please tell me.

    <script>
        $(function () {
            var newrow = "<tr><td>data1</td><td>data1</td></tr>";
            $("table tfoot").before(newrow);
        })
    </script>

    Wednesday, January 6, 2016 8:39 AM