JoeGarrepy.com Add/Delete rows from/to a HTML table using JavaScript

Programming/
Tools
      Oracle
      JavaScript
      C#

Fun Stuff
      Music
      Martial Arts
      Robotech

Other
      Main

DISCLAIMER

This disclaimer is intended to cover all software/freeware, and other various files which are downloadable through or from this site.
Joe Garrepy, isp, and web host can not be held responsible for any software downloaded from this site. All freeware is downloaded at your own risk. Software which is listed on this site is assumed to work properly, but may or may not have different effects on different computer systems. The same rules apply to these programs. Joe Garrepy assumes no responsibility for those unusual occurrences where software has adverse effects on users computer. Joe Garrepy does not warrant these programs/files, and as such, can offer no guidelines in which to use them. All freeware/software/files, trademarks, service marks, and copyrights are acknowledged as belonging to their owners. Any of these which the owner wishes to be removed will be done so immediately. By downloading any software or viewing pages in which software can be downloaded, you agree to be bound to this agreement.

JoeGarrepy.com Add/Delete rows from/to a HTML table using JavaScript

The following script allows you to add or delete rows to an HTML table with JavaScript. In this example a grid of data is showing for different pets. The Add Row button will add another row with input fields in it to emulate adding a new database row at the end of the table. The Delete Row button will delete the row that you press it on.

Rownum	Animal	Name	Age
1	Dog	Scooby Doo	6
2	Cat	Tom	4
3	Mouse	Jerry	1

Java Script Portion

<SCRIPT TYPE="text/javascript">
  var count = "1";
  function addRow(in_tbl_name)
  {
    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
    // create row
    var row = document.createElement("TR");
    // create table cell 1
    var td1 = document.createElement("TD")
    var strHtml1 = "<FONT SIZE=\"+3\">*</FONT>";
    td1.innerHTML = strHtml1.replace(/!count!/g,count);
    // create table cell 2
    var td2 = document.createElement("TD")
    var strHtml2 = "<SELECT NAME=\"Animal\"><OPTION VALUE=\"Cat\">Cat<OPTION VALUE=\"Dog\">Dog<OPTION VALUE=\"Mouse\">Mouse</SELECT>";
    td2.innerHTML = strHtml2.replace(/!count!/g,count);
    // create table cell 3
    var td3 = document.createElement("TD")
    var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"30\"  STYLE=\"height:24;border: 1 solid;margin:0;\">";
    td3.innerHTML = strHtml3.replace(/!count!/g,count);
    // create table cell 4
    var td4 = document.createElement("TD")
    var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"5\"  STYLE=\"height:24;border: 1 solid;margin:0;\" READONLY>";
    td4.innerHTML = strHtml4.replace(/!count!/g,count);
    // create table cell 5
    var td5 = document.createElement("TD")
    var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">";
    td5.innerHTML = strHtml5.replace(/!count!/g,count);
    // append data to row
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);
    // add to count variable
    count = parseInt(count) + 1;
    // append row to table
    tbody.appendChild(row);
  }
  function delRow()
  {
    var current = window.event.srcElement;
    //here we will delete the line
    while ( (current = current.parentElement)  && current.tagName !="TR");
         current.parentElement.removeChild(current);
  }
</SCRIPT>

Html Portion

<TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;">
<TR><TH>Rownum</TH><TH WIDTH="70">Animal</TH><TH WIDTH="230">Name</TH><TH WIDTH="70">Age</TH><TD ALIGN="center"><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></TD></TR>
<TR><TD>1</TD><TD>Dog</TD><TD>Scooby Doo</TD><TD>6</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR>
<TR><TD>2</TD><TD>Cat</TD><TD>Tom</TD><TD>4</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR>
<TR><TD>3</TD><TD>Mouse</TD><TD>Jerry</TD><TD>1</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR>
</TABLE>

If you find any bugs or want to contact me I can be reached @ doughjoe77@hotmail.com.