delete row() dynamically

Hi!

I can add rows with inputs to my HTML table dynamically using DOM, but I cannot remove selected rows. In fact, every row contains a Delete button. So, user selects the rows to remove, clicks the delete button selected row wants to delete.

My problem is(If i delete the first row, its say undefined and change the value is 0) pls check my program.

Expand|Select|Wrap|Line Numbers

 
<%pathdefiner = "../"%>

<!--#include file="../connection/connector.asp" -->

<!--#include file="declareVariables.asp" -->

<!--#include file="../MainMenu/Header.htm" -->
 
<script language="JavaScript" type="text/javascript">

<!--

var hasLoaded = false;
 
function addRowToTable()

{

  var c=0;

//  var nos=1;

// var i;
 
  var tbl = document.getElementById('tblSample');

  var lastRow = tbl.rows.length;

  // if there's no header row in the table, then iteration = lastRow + 1

  var iteration = lastRow;

  //document.write ("iteration = " + iteration);
 
  if(lastRow == 7)

  {

  alert("Only six countrys");

  }

  else{

  var row = tbl.insertRow(lastRow);
 
  // left cell

  var cellLeft = row.insertCell(0);

  var textNode = document.createTextNode(iteration);

  cellLeft.appendChild(textNode);
 
  // right cell

  var cellRight = row.insertCell(1);

  var el = document.createElement('input');

  el.type = 'text';

  el.name = 'txt_C' + iteration;

  el.id = 'txt_C' + iteration;

  el.size = 40;
 
  el.onkeypress = keyPressTest;

  cellRight.appendChild(el);
 
    // text box cell

  var textRight = row.insertCell(2);

  var el = document.createElement('input');

  el.type = 'text';

  el.name = 'txt_F' + iteration;

  el.id = 'txt_F' + iteration;

  el.onfocus = function(event){return showCalendarControl(this);};

  el.size = 20;

  el.onblur = this;

  el.readOnly = this;
 
  el.onkeypress = keyPressTest;

  textRight.appendChild(el);
 
   // text box cell

  var txtRight = row.insertCell(3);

  var el = document.createElement('input');

  el.type = 'text';

  el.name = 'txt_T' + iteration;

  el.id = 'txt_T' + iteration;

  el.onfocus = function(event){return showCalendarControl(this);};

  el.size = 20;

  el.onblur = this;

  el.readOnly = this;
 
  el.onkeypress = keyPressTest;

  txtRight.appendChild(el);
 
      // Delete Button

    var btnRight = row.insertCell(4);

    var  el = document.createElement('input');

    el.type = 'button';

    el.name = 'btnDel' + iteration;

    el.id = 'btnDel' + iteration;

    el.value = 'Delete'

    el.onfocus = function(event){return removeRowFromTable(this);};

    el.onkeypress = keyPressTest;

    btnRight.appendChild(el);
 
     //Row count

    lastRow = c+lastRow

    document.frm.txt_count.value = lastRow;
 
    }

}
 
function keyPressTest(e, obj)

{

    var displayObj = document.getElementById('spanOutput');

    var key;

    if(window.event) {

      key = window.event.keyCode; 

    }

    else if(e.which) {

      key = e.which;

    }

    var objId;

    if (obj != null) {

      objId = obj.id;

    } else {

      objId = this.id;

    }

}
 
function removeRowFromTable(r)

{

  var i=r.parentNode.parentNode.rowIndex;

  var tbl = document.getElementById('tblSample');

  var lastRow = tbl.rows.length;

  alert(i);

 if (lastRow > 2 ) 

  {

  alert("i"+i);

  tbl.deleteRow(i+1);

  }

  else

  {

    alert("Please enter 'NIL' for country if your are not travelling");

    return;

}
 
    var tbl = document.getElementById('tblSample');

    var lastRow = tbl.rows.length - 1;

    document.frm.txt_count.value = lastRow;
 
    //frm.action = "Remove_Data.asp";

    //frm.submit();

}
 
function onloa()

{

    var tbl = document.getElementById('tblSample');

    var lastRow = tbl.rows.length - 1;

    document.frm.txt_count.value = lastRow;
 
}
 
function validateRow(frm)

{

    var tbl = document.getElementById('tblSample');

    var lastRow = tbl.rows.length - 1;

    var i;

    var compDate,j;
 
    for (i=1; i<=lastRow; i++) {

      var aRow = document.getElementById('txt_C' + i);

      var FDate = document.getElementById('txt_F' + i).value;

      var TDate = document.getElementById('txt_T' + i).value;

      var country = document.getElementById('txt_C' + i).value; 
 
      country = country.toUpperCase();    
 
      if (aRow.value.length <= 0) {

        alert('The country ' + i + ' is empty');

        return;

      }

      var test;

      test = "NIL" 

      compDate = TDate - FDate;
 
      if (FDate>TDate) {

        alert("You have entered the date incorrectly on Row '" + i +"', please make the necessary amendments.");

        return;

      }    
 
     // else

     if (country != test)

     {

         if(FDate == "NaN" || TDate == "NaN")

        {

        alert("You have entered the date incorrectly on Row '" + i +"', please make the necessary amendments.");

        return;

        }
 
         else if(FDate == "" || TDate == "")

        {

        alert("You have entered the date incorrectly on Row '" + i +"', please make the necessary amendments.");

        return;

        }

    }
 
//    else

//    {

//    alert("Please enter the Date" + i);

//    return;

//    }  
 
    }// for loop end
 
    if(document.getElementById('tet_Name_PG').value == "NIL" || document.getElementById('tet_Name_PG').value == "")

    {

    alert("Please enter Name of Parent/Guardian. ");

    return;

    }
 
    var cons;

    cons = document.getElementById('tet_Contact').value;
 
    if (!Number(cons)) 

           { 

          alert('Please enter Parent/Guardian Contact no.') 

   //   frm.tet_Contact.focus(); 

          return; 

      } 
 
  frm.submit();

}
 
function Stud_Qual()

 {

 if(document.getElementById("txt_C1").value == "NIL")

    {

      document.getElementById("txt_F1").value = document.getElementById("txt_C1").value;

      document.getElementById("txt_T1").value = document.getElementById("txt_C1").value;

      }
 
 }

function MM_jumpMenu(targ,selObj,restore){ //v3.0

  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

  if (restore) selObj.selectedIndex=0;

}

//-->

</script>

<style type="text/css">

<!--

.style3 {

    font-size: 1px;

    color: #FFFFFF;

}

.style4 {

    font-size: 24px;

    font-weight: bold;

    color: #003333;

}

.style9 {font-size: 18px; font-weight: bold; }

.style10 {color: #EE0000}

-->

</style>
 
<%

Dim retrieveSql, rSql

retrieveSql = "SELECT * FROM "& TBL_LOGIN & " WHERE " & TFL_IC & "='"& Session.Contents("IDNO") &"';"
 
Set rsRetrieve = Server.CreateObject("ADODB.Recordset")

Set rsRetrieve.ActiveConnection = my_Conn
 
rsRetrieve.Source = retrieveSql

rsRetrieve.Open
 
if rsRetrieve.EOF Then

else

do until rsRetrieve.EOF    

%>

<form name="frm" id="frm" method="post" action="Update_Data.asp">

<table align="center" width="300" border="2" cellspacing="0" cellpadding="0" bordercolor="#004400" bgcolor="#e5ffe5">

  <tr>

    <td><img src="../images/overseas_travel5.jpg" width="872" height="242"></td>

  </tr>

  <tr>

    <td>

    <p>&nbsp;</p>

    <p align="center" class="style4">INFORMING SCHOOL OF CHILD'S/WARD'S TRAVEL PLANS</p>

<p>&nbsp;</p>
 
        <div align="center">

        <p>&nbsp;</p>

          <select name="travel" id="travel" onChange="javascript:YesOnclick('travel', 'SPAN_travel', 'YES')">

            <option value="NIL">--Choose one--</option>

            <option value="YES"> Travelling </option>

            <option value="NO"> Not_Travelling </option>

          </select>
 
        <p>&nbsp;</p>

        </label></div>
 
<table width="595" align="center" border="0" cellspacing="3" cellpadding="2">

  <tr>

    <td width="189"><span class="style9">Name of Child/Ward</span></td>

    <td width="16"><div align="center">:</div></td>

    <td width="334">&nbsp;<b><% =rsRetrieve("Name")%></b></td>

  </tr>

  <tr>

    <td><span class="style9">NRIC/FIN No.</span></td>

    <td><div align="center">:</div></td>

    <td>&nbsp;<b><%=Session.Contents("IDNO")%></b></td>

  </tr>

  <tr>

    <td><span class="style9">Sex</span></td>

    <td><div align="center">:</div></td>

    <td>&nbsp;<b><% =rsRetrieve("Sex")%></b></td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td colspan="3"><strong>This is to inform the school that my child/ward will be traveling to the following country/countries during the school holidays. The details are as listed below:</strong></td>

    </tr>

</table>

<p class="style10">&nbsp;</p>
 
<table width="583" align="center" height="91" border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td width="583"><p class="style10"><strong>Important Notes:</strong></p>

      <p class="style10"><strong>1. Where possible, please also provide details of country and date of transit if your child/ward will be stopping over at any other country while travelling.</strong></p>

      <p class="style10"><strong>2. If your child/ward will not be traveling, please return the form with a NIL return.</strong></p></td>

  </tr>

</table>

<p class="style10">&nbsp;</p>

<table width="746" align="center" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="746"><p>&nbsp;</p>

    <table width="639" align="center" border="1" cellpadding="3" cellspacing="2">

  <tr>

    <th width="282" rowspan="2" class="style9">Country of Intended Travel</th>

    <th colspan="2" class="style9">Period of Stay</th>

    </tr>

  <tr>

    <th width="151" class="style9">From</th>

    <th width="151" class="style9">To</th>

  </tr>

</table>
 
<table width="665" align="center" border="1" cellpadding="3" cellspacing="2" id="tblSample">

<tr>

    <td colspan="6"><span class="style3">a</span></td>

    </tr>

  <%
 
Dim RetrieveArr(3)
 
coun = rsRetrieve("no_row")
 
            for n = 1 to coun
 
        //for each x in rsRetrieve.fields

        for j = 0 to Ubound(all_fields)-1

            Dim dbname

            dbname = all_fields(j)

            dbname = MID(dbname,5)
 
    dbname = Replace(dbname,1,",")

    dbname = Replace(dbname,",",n)
 
            RetrieveArr(j) = rsRetrieve(dbname)

            //response.write(dbname)&" " & RetrieveArr(j) &"<br>"

              next

  %>

  <%   if rsRetrieve("no_row") = 0 then %>

  <tr>
 
    <td width="12"><b> 1 </b></td> 

  <% else %>

    <td width="17"><%=response.Write (n) %></td>

  <% end if %>

    <td width="255"><input type="text" name="txt_C1" id="txt_C1" size="40" onKeyPress="keyPressTest(event, this);" onBlur="javascript:Stud_Qual();" value="<%=RetrieveArr(0)%>" /></td>
 
    <td width="144"><label>

      <input type="text" name="txt_F1" id="txt_F1" onFocus="javascript:showCalendarControl(this);" value="<%=RetrieveArr(1)%>" readonly  />

    </label></td>

    <td width="146"><label>

      <input type="text" name="txt_T1" id="txt_T1" onFocus="javascript:showCalendarControl(this);" value="<%=RetrieveArr(2)%>" readonly  />

    </label></td>

    <td width="27"><label>

  <input name="btnDel" id="btnDel1" type="button" value="Delete" onClick="javascript:removeRowFromTable(this);">

  </label></td>

  </tr>

  <%

        //next

    //    i=i+1

    //    rsRetrieve.MoveNext

        next
 
//  next

  %>

</table>
 
      <p>&nbsp;</p>
 
      <p align="center">&nbsp;

  <input type="button" value="Add New Row" onClick="addRowToTable();" />

</p>

<p>&nbsp;</p>

      </td>

  </tr>

</table>
 
<table width="617" align="center" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="251" class="style9">Name of Parent/Guardian</td>

    <td width="32" class="style9"><div align="center">:</div></td>

    <td width="334" class="style9"><label>

    <input type="text" name="tet_Name_PG" id="tet_Name_PG" value="<% =rsRetrieve("Name_PG")%>">

    </label></td>

  </tr>

  <tr>

    <td class="style9">Parent/Guardian contact No.</td>

    <td class="style9"><div align="center">:</div></td>

    <td class="style9"><label>

    <input type="text" name="tet_Contact" id="tet_Contact" value="<% =rsRetrieve("Contact")%>" >

    </label></td>

  </tr>

</table> <p>&nbsp;</p>

  <div align="center">

  <input type="hidden" name="txt_count" id="txt_count"  >

  <input name="btnSave" type="button" value="Submit" onClick="javascript:validateRow(this.form);">

   </div>

  <p>&nbsp;</p>  </td>

  </tr>

</table>
 
</form>

<%

     rsRetrieve.MoveNext

     loop

     End if

 rsRetrieve.Close

 my_Conn.Close

 Set rsRetrieve = Nothing

 Set my_Conn = Nothing

 Response.Expires=-1

%>

<!--#include file="../MainMenu/Footer.htm" -->
 
<script>

    setupScript();

</script>

Pls help me....

Thanks,
Susan.

May 2 '09 #1

Subscribe Post Reply

5295

acoder

16,027

Expert Mod 8TB

You have the following events:

Expand|Select|Wrap|Line Numbers

 el.onfocus = function(event){return removeRowFromTable(this);};

el.onkeypress = keyPressTest;

Surely you mean onclick and don't require the keypress event. I haven't checked the remove function(). What line does the error occur on and what is the exact error message?

May 2 '09 #2

delete row() dynamically

Similar topics