Add/Delete Rows in Grid

You are allowed to add rows to your grid any time you need by using API methods. You should specify the position where the row should appear.
Deleting row is easy as well:

Add Row to the second position

Delete Row by index

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>        
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
 
 
 
<table width="360px">
    <tr>
        <td>
            <div id="gridbox" style="width:100%;height:250px;background-color:white;overflow:hidden"></div>
        </td>
    </tr>
</table>
<table width="375">
    <tr>
        <td>
            <li><a href="#" onclick="add_r()">Add Row to the second position</a></li>
            <li><a href="#" onclick="delete_r()">Delete Row by index</a></li>
        </td>
    </tr>
</table>
    
<script>function add_r() {
    var ind1 = window.prompt('Value for the first cell', '');
    if (ind1 === null || typeof ind1 == "undefined")
        return;
    var ind2 = window.prompt('Value for the second cell', '');
    if (ind2 === null || typeof ind2 == "undefined")
        return;
    mygrid.addRow(mygrid.uid(), [ind1, ind2], 1);
}
function delete_r() {
    var ind1 = window.prompt('Row[index] to delete', '0');
    if (ind1 === null)
        return;
    mygrid.deleteRow(mygrid.getRowId(ind1));
}
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../codebase/imgs/");
mygrid.setHeader("Column A, Column B");
mygrid.setInitWidths("100,250");
mygrid.setColAlign("right,left");
mygrid.setColTypes("ro,ed");
mygrid.setColSorting("str,str");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
mygrid.loadXML("../common/grid_16_rows_columns_manipulations.xml");</script>