Adding a table row : Table Grid « GUI Components


 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

  <TITLe>Demo of DHTML Grid V 0.92</title>

  <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <META http-equiv="Author" content="Charles Dickens">

        <STYLE type="text/css"> 

    A:link {color:#FFFFFF;   font-weight: normal; text-decoration: none;}

    A:visited {color:#FFFFFF; font-weight: normal; text-decoration: none;}

    A:active {color:#FFFFFF; font-weight: normal; text-decoration: none;}

    A:hover {color:#FFFFFF; font-weight: normal; text-decoration:underline;}

    BODY {bottom-Margin:0px; background-color:#003399; left-Margin:20px;

      top-Margin:0px; right-Margin:0px; color:#FFFFFF}

    TD {font-family: "Verdana, Arial"; font-size: 12px;}

    .bigheader {font-family: "Verdana, Arial"; font-size: 28px; font-weight: bold}

    .mnuheader {font-family: "Verdana, Arial"; font-size: 16px;}

    .inputBox { border-style: solid; border-width: 1px; font-family: verdana, arial,

        sans-serif; font-size: 9px; padding: 0px; color:black; backgroundcolor: #FFFFEE}

  </STYLE>

</HEAD>

<BODY> 

  <TABLE width ="600" align="center" cellpadding="0px" cellspacing="1px">

    <TR><TD align="center">

      <U><FONT class="bigheader" color="#FF9933">THE </FONT>

      <FONT class="bigheader" color="#FFFFFF">&lt;DHTML&gt; </FONT>

      <FONT class="bigheader" color="#FF9933">Grid</FONT></U>

    </TD></TR>

    <TR><TD align="center">

    </TD></TR>

    <TR><TD align="center">

      <TABLE cellpadding="1px" cellspacing="0px" bgcolor="#FFFFFF" width="596px">

        <TR><TD>

          <TABLE cellpadding="1px" cellspacing="1px" bgcolor="#003399" width="100%">

            <TR><TD>

              <TABLE cellpadding="1px" cellspacing="2px" bgcolor="#FFFFFF" width="100%">

                <TR><TD>

                  <TABLE cellpadding="8px" cellspacing="1px" bgcolor="#000000" width="100%">

                    <TR><TD>

                      <BR><FONT color="#FF9933">&#164;</FONT> 

                      This is the test area for ver 0.92 which will be released soon.

                      For the latest <i>stable</i> release click on the download link above.

                      <FONT color="#FF9933">&#164;</FONT> 

                    </TD></TR>

                  </TABLE>

                </TD></TR>

                <TR><TD>

                  <TABLE cellpadding="8px" cellspacing="1px" bgcolor="#000000" width="100%">

                    <TR><TD>

                      <IFRAME id="frmGrid1" name="frmGrid1" scrolling="auto" frameborder="0" src="4colGrid.htm" width="601" height="150"></IFRAME>

                      <FONT color="#FFFFFF">Col 1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Col 2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Col 3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Col 4</FONT><BR>

                      <FORM>

        <INPUT id="Col1" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col1">

        <INPUT id="Col2" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col2">

        <INPUT id="Col3" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col3">

        <INPUT id="Col4" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col4"><BR>

        <INPUT value="ADD" name="cmdAddRow" id="cmdAddRow" title="Add Row" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; FONT-FAMILY: Verdana, Arial;" type="button" onclick="javascript: top.frames['frmGrid1'].addRow(Col1.value, Col2.value , Col3.value, Col4.value), Col1.value='', Col2.value='', Col3.value='', Col4.value='';" >

        <INPUT value="Delete" name="cmdDeleteRow" id="cmdDeleteRow" title="Delete Last Row" style="FONT-SIZE: 8pt; LEFT: 93px; WIDTH: 102px; FONT-FAMILY: Verdana, Arial; " type="button" onclick="javascript: return top.frames['frmGrid1'].deleteLastRow()">

        </FORM>

        <BR><BR>

                      <FONT color="#FF9933">&#164;</FONT> The biggest feature of ver 0.92 is that it works both IE 5+ and in Netscape 6+ <BR>

                  <FONT color="#FF9933">&#164;</FONT> Mouseover to select a row. <BR>

                      <FONT color="#FF9933">&#164;</FONT> Select any row and hit Delete key to delete it <BR>

                  <FONT color="#FF9933">&#164;</FONT> Click to edit.... and everything else

</TD></TR>

                  </TABLE>

                </TD></TR>

              </TABLE>

            </TD></TR>

          </TABLE>

        </TD></TR>

      </TABLE>

    </TD></TR>

  </TABLE>

  </BODY>

</HTML>
Adding a table row : Table Grid « GUI Components « JavaScript DHTML
