Member Avatar for nadiam

HI, so im trying to add new rows to my table using the codes that were given but the row doesnt stick, as in it disappears just after clicking a button. Am i doing something wrong?

<script type="text/javascript" charset="utf-8">  
        var giCount = 1;
        $(document).ready(function() 
        {   
            //initialise the table
            $("#tables").dataTable( );
        });
        function fnClickAddRow() {
        $('#tables').dataTable().fnAddData( [
            "Table "+ giCount,
            "Table "+ giCount] );
            giCount++;
        }
    </script>
<div style="float:right;height:0;width:500px">
    <form method="" action="">
        <div style="float:right;height:0;">
            <input type="submit" name="addT" value="Add Table" onclick="fnClickAddRow();" />
        </div>
        <table id="tables" border="2" rules="all" cellspacing="5px" cellpadding="5px" width="500px">
            <thead>
                <tr>
                    <th>Table</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </form>
</div>
  • 2 Contributors
  • 2 Replies
  • 832 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by nadiam

Dani AI

Generated

Quick expert note: the disappearing row is almost always caused by the page reloading after the add button submits the surrounding form — any DOM changes are lost on navigation. spotted that behavior; below are a few robust fixes and checks that go beyond switching the control type.

Use JavaScript to stop the form submission and then add the row. For newer DataTables (1.10+), a safe pattern is to intercept the click, prevent default, and use the modern API to add a row without forcing a full redraw:

$('#addButton').on('click', function(e) {
  e.preventDefault();               // stop the form submitting
  var table = $('#tables').DataTable();
  table.row.add(['New cell value']).draw(false); // draw(false) keeps paging/state
});

If you must keep the form, either place a non-submitting control outside it or intercept its submit handler. Also confirm the number of values you add matches the number of table columns — passing more or fewer cells than there are <th> elements will misalign cells or create unexpected structure. Removing the form wrapper entirely is fine when you don't need a real form submit.

Quick debugging tips: open DevTools -> Network (or Console) to see whether a request happens when you click the button; if so, the form is submitting. Give the add control an id and bind events in JS (avoid inline onclick). Consider upgrading to a newer DataTables release for the clearer row.add() API and use draw(false) to preserve table state.

Recommended Answers

All 2 Replies

Member Avatar for Ajay Gokhale

Hi,

Please try to change input type to "button"

<input type="button" name="addT" value="Add Table" onclick="fnClickAddRow();" />

because button type submit may refresh the page.

Please let me know.

Thanks,
Ajay

Member Avatar for nadiam

thanks! that worked.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.