<form id="form1" runat="server"> <div> <table width="100%" cellspacing="5"> <tr> <td style="width: 8%; height: 100%; vertical-align: top;"> <div id="divTools" style="width: 100%; background-color: gray;"> <div id="divctrltitle"> Form Toools </div> <div id="divctrl"> <ul> <li id='label'><span>Label</span></li> <li id='input type="text"'><span>TextBox</span></li> <li id='select'><span>DropDownList</span></li> <li id='textarea'><span>Textarea</span></li> <li id='input type="button" value="Add"'><span>Add</span></li> <li id='input type="button" value="Save"'><span>Save</span></li> <li id='input type="button" value="update"'><span>Update</span></li> </ul> </div> </div> <table> <tr> <td> </td> </tr> </table> <table> <tr> <td> <input type="button" id="aBAddClnBtn" value="Add Column" onclick="" /> </td> </tr> </table> </td> <td style="width: 60%; height: 100%; vertical-align: top;"> <div id="divContent" style="border: solid 3px gray; height: 450px; width: 100%;"> <div id="divSubContent" style="border: solid 1px gray; width: 15%; height: 100%;"> <div id="divSubContent1" style="border: solid 1px gray; width: 100%; height: 50px;"> </div> <div id="divSubContent2" style="border: solid 1px gray; width: 100%; height: 395px;"> </div> </div> </div> </td> <td id="tdPropertyWindow" style="width: 25%; height: 100%; vertical-align: top;"> <div id="lYPropertyWindow" style="width: 100%; background-color: Gray;"> <table> <tr> <td colspan="2" align="center"> <b>Properties</b> </td> </tr> <tr> <td> <b>FieldName</b> </td> <td> <select id="lBFieldName" name="lBFieldName" style="width: 125px;"> <option value="EmpId">EmpId</option> <option value="EmployeeName">EmployeeName</option> <option value="JobTitle">JobTitle</option> <option value="Division">Division</option> <option value="Location">Location</option> <option value="HireDate">HireDate</option> <option value="PerformanceResults">PerformanceResults</option> <option value="PerformanceBehaviour">PerformanceBehaviour</option> <option value="MeritIncrement">MeritIncrement</option> <option value="Lumpsum">Division</option> <option value="PromoJobTitle">PromoJobTitle</option> <option value="PromoIncrement">PromoIncrement</option> </select> </td> </tr> <tr> <td> <b>DisplayName</b> </td> <td> <input type="text" id="txtDispalyName" name="txtDisplayName" style="width: 120px;" /> </td> </tr> <tr> <td> <b>TableName</b> </td> <td> <input type="text" id="txtTableName" name="txtTableName" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Width</b> </td> <td> <input type="text" id="txtWidth" name="txtWidth" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Height</b> </td> <td> <input type="text" id="txtHeight" name="txtHeight" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Top</b> </td> <td> <input type="text" id="txtTop" name="txtTop" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Left</b> </td> <td> <input type="text" id="txtLeft" name="txtLeft" style="width: 120px;" /> </td> </tr> <tr> <td> <b>ContainerId</b> </td> <td> <input type="text" id="txtContainer" name="txtContainer" style="width: 120px" /> </td> </tr> <tr> <td> <b>Visibility</b> </td> <td> <input type="text" id="txtVisible" name="txtVisible" value="True" style="width: 120px;" /> </td> </tr> <tr> <td> <b>PrimaryKey</b> </td> <td> <select id="lBPrimaryKey" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td> <b>Used</b> </td> <td> <select id="lBUsed" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td> <b>Editable</b> </td> <td> <select id="lBEditable" style="width: 125px;"> <option value="true">True</option> <option value="false">False</option> </select> </td> </tr> <tr> <td colspan="2" align="center"> <b>Data Type</b> </td> </tr> <tr> <td> <b>Alpha/Num</b> </td> <td> <input type="text" id="txtAlpha" name="txtAlpha" style="width: 120px;" /> </td> </tr> <tr> <td> <b>NumberType</b> </td> <td> <input type="text" id="txtNumberType" name="txtNumberType" style="width: 120px;" /> </td> </tr> <tr> <td> <b>FieldType</b> </td> <td> <input type="text" readonly="readonly" id="txtFieldType" name="txtFieldType" style="width: 120px;" /> </td> </tr> <tr> <td> <b>Precision</b> </td> <td> <input type="text" id="txtPrecision" name="txtPrecision" style="width: 120px;" /> </td> </tr> </table> </div> </td> </tr> </table> </div> </form>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script> <script type="text/javascript"> $(function() { $("#add").click(function() { div = document.createElement('div'); $(div).addClass("inner").html("new inner div"); $("#container").append(div); }); }); </script> <style> #container {border: 1px solid red; padding: 10px; width: 100%;} .inner {border: 1px solid green; margin: 10px; width: auto; height: 20px;} </style> <body> <div id="container"> <div class="inner">original inner div</div> </div> <button id="add">Add new div</button> </body>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)