<%@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); } } }); } }