Adding a table row : Table Grid « GUI Components « JavaScript DHTML

Adding a table row

 

<!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>

AddTableRow.zip( 9 k)

Related examples in the same category

1.	Table Sorter Proof of Concept
2.	Create 100 random rows and do the column sorting
3.	Sortable table column
4.	Table row style with 'mouse roll over' effect
5.	Pagable Table
6.	Repeat table column at the table bottom
7.	Editable table cell
8.	Table row with mouse roll over
9.	List box ( Grid Table )
10.	List view (Selection between two list)
11.	Basic Grid (Table)
12.	Grid (Table) with colored cells
13.	Build a Grid (Table) from CSV data file
14.	Build a Grid (Tree) from a tab separated file
15.	Build a Grid (Table) from yahoo quotes (IE only)
16.	Grid (Table) with image in cells
17.	Grid (Table) with multiple selection
18.	Grid (Table) with row header and tooltips
19.	One page two grid (Table)
20.	Data in Grid (Table) from XML file
21.	Grid (Table) with Data Island and Column highlight
22.	Grid (Table) with cell format and XML data set
23.	Grid (Table) data from RSS (IE only)
24.	Grid (Table) data from xml file 2
25.	Grid (Table) with news feeder (IE only)
26.	Grid (Table) with quotes feeder (IE only)
27.	Grid (Table) in Unix style
28.	Sortable Grids (table)
29.	Selectable Cells Grid Table
30.	Editable Grid Table cell
31.	Call back action in Grid Table
32.	Table Grid Rows Selection
33.	Grid Table Columns Resize
34.	Table Grid Column Renderers
35.	Sorting for each column or double click to edit its contents.
36.	Table Grid style and sort the style
37.	Table in JavaScript
38.	Web Data Grid Table
39.	Sortable Tables from Scratch with MochiKit
40.	Ajax Table
41.	Drag and drop table columns
42.	Dynamic data grid: add a row, remove a row and sort column
43.	super table
44.	GUI for table creation
45.	Table sorter
46.	Sortable Table