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

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

Answer 1

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

Answer 2

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

Answer 3

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>