<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM Manipulation - Dynamic Table</title>
    </head>
    <body>
        <div style="padding:15px;">
            <WAF:Button id="btnAdd" text="Add Row"/>
            <WAF:Button id="btnRemove" text="Remove Row"/>
            <WAF:Button id="btnRemoveAll" text="Remove All"/><br/>
            <div style="height:300px;overflow: auto;">
                <table id="Table1" border="1" style="border: 1px solid #D2D2D2;border-collapse: collapse;" cellpadding="8px"/>
            </div>
        </div>


    </body>
</html>
                        
package controllers;

import com.openwaf.client.core.Window;
import com.openwaf.client.dom.TableCellElement;
import com.openwaf.client.dom.TableElement;
import com.openwaf.client.dom.TableRowElement;
import com.openwaf.client.event.dom.ClickEvent;
import com.openwaf.client.event.dom.ClickHandler;
import com.openwaf.client.ui.annotation.ViewElement;
import com.openwaf.client.ui.basic.Button;
import com.openwaf.core.framework.WAFController;

public class ExDOMDynamicTable extends WAFController {
    @ViewElement
    private Button btnAdd;
    @ViewElement
    private Button btnRemove;
    @ViewElement
    private Button btnRemoveAll;
    private TableElement Table1;//we need to assign value to this
    public ExDOMDynamicTable(){
        Table1=(TableElement)Window.getDocument().getElementById("Table1");
        btnAdd.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                TableRowElement row=Table1.insertRow(Table1.getRows().length);
                for(int i=0;i<5;i++){
                    TableCellElement cell=row.insertCell(i);
                    cell.setInnerHTML("Table Cell "+ i);
                    cell.getStyle().setPadding("4px");
                }
            }
        });
        btnRemove.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                if(Table1.getRows().length>0){
                    Table1.deleteRow(Table1.getRows().length-1);
                }
            }
        });
        btnRemoveAll.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                for(;Table1.getRows().length>0;){
                    Table1.deleteRow(0);
                }
            }
        });
    }
}