delete row() dynamically

**acoder** · May 2 '09, 05:26 PM

You have the following events:

Code:

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?

**shivasusan** · May 4 '09, 02:04 AM

Hi!

Code:

function removeRowFromTable(r) 
{ 
 [b] var i=r.parentNode.parentNode.rowIndex; [/b] // pls check this line.... 
  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(); 
}

If i delete the second row. alert msg say the value is 2, then If i delete the first row, alert msg say undefined value and automatically change the value is 0. why?
The value is changed 0, that time only display error. the error message is "Invalid argument". This is my problem. Pls help me.... Pls reply to me immediately.

Thanks and Regards,
Susan.

**dmjpro** · May 4 '09, 04:36 AM

Can you show me the generated HTML code.
If there is an external JS link then post it also.
You are having table headers. And you want to delete all the rows except table headers.

Code:

button_ref = function(){removeRow(this.parentNode.parentNode);}
...
...

function removeRow(row_ref){
row_ref.parentNode.removeChild(row_ref);
}

**shivasusan** · May 4 '09, 07:01 AM

Hi!

Thankyou very much for reply.

I want to delete seleted rows and except row header. Now i problem is (If i delete the second row. alert msg say the value is 2, delete the forth row. alert msg say the value is 4. and If i delete the first row, alert msg say undefined value and change the value automatically is 0. why?) Kindly help me.... pls check my coding is below:

Code:

function setupScript()
	{
	YesOnclick('travel', 'SPAN_travel', 'YES');
	}
	
function displayNhide(display,status){
	document.getElementById(display).style.display = status;
}

function YesOnclick(onClickbtn, spanId, valueToCheck){
	var value = document.getElementById(onClickbtn).value;
			alert(value);

	if(value != 'NO' || value != 'NIL'){alert("VAlue" + value);
		if(value == "YES")
		displayNhide(spanId, 'block');
		else 
		displayNhide(spanId, 'none');
	} 
	
}

Code:

<%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);
  }
  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="http://bytes.com/topic/javascript/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 reply to me immediately.... .... help me to solve....

Thanks & Regards,
Susan.

**dmjpro** · May 4 '09, 10:31 AM

Well do one thing ...

Code:

alert(r.tagName);
alert(r.parentNode.tagName);
alert(r.parentNode.parentNode.tagName);

Check all the Tag.

**shivasusan** · May 6 '09, 03:13 AM

Hi!

alert(r.tagName ); ----- i delete the second row. that time the alert message "INPUT", but delete the 3 row & if i delete the first row... that time the alert message is "INPUT" and delete the row header, didn't delete the first row...

alert(r.parentN ode.tagName); ---- i delete the second row. that time the alert message "TD", but delete the 3 row & if i delete the first row... that time the alert message is "LABEL" and delete the row header, didn't delete the first row...

alert(r.parentN ode.parentNode. tagName); ---- i delete the second row. that time the alert message "TR", but delete the 3 row & If delete the first row.... that time the alert message is "TD" and delete the row header, didn't delete the first row... why? pls help me...

i am not expert in javascript, so pls help me to solve this problem.

Thanks & Regards,
Susan.

**dmjpro** · May 6 '09, 03:50 AM

Originally posted by shivasusan

alert(r.parentN ode.tagName); ---- i delete the second row. that time the alert message "TD", but delete the 3 row & if i delete the first row... that time the alert message is "LABEL" and delete the row header, didn't delete the first row...

Susan.

That's what exactly i expected ;)
so answer is already with you..simply remove the label around the INPUT delete button in the first row.
Please let me know what happens ;)

**shivasusan** · May 6 '09, 05:29 AM

Hi!

Thankyou soooooo much.... it is working. i try to solve this more than one week, but today i got the answer with your help........... . really thankyou... I am so happy..... thanks for you help immediately.... :)

**dmjpro** · May 6 '09, 05:32 AM

Yeah you welcome ;)
For that we are here ......

**shivasusan** · May 6 '09, 05:41 AM

Hi!

I need one more help....

In the table i want to change the sl. no. automatically. How?

because If i delete the 3 row, the sl. no. is display (1,2,4,5,6.) wrongly. i want to display 1,2,3,4,5.

Thanks & Regards,
Susan.

**shivasusan** · May 6 '09, 05:57 AM

Hi!

Pls help me....

**dmjpro** · May 6 '09, 06:17 AM

see ............... ..... suppose you want to delete nth row.
and you have m rows, where (m-1)>=n.

Code:

function remove(...){
//delete the row
for(var i=n;i<m-1;i++){
 var first_cell_ref = ...
 first_cell_ref.innerHTML = i+1;
}
}

**shivasusan** · May 6 '09, 06:28 AM

Hi!

Yes...

but in my program... i display the serial number in addrow() below my coding, so how i can change. If i change the remove(). its automatically change the serial number. sorry i am not understand....

Code:

  var cellLeft = row.insertCell(0); 
  var textNode = document.createTextNode(iteration); 
  cellLeft.appendChild(textNode);

Code:

function removeRowFromTable(r)
{
  var i=r.parentNode.parentNode.rowIndex;
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
alert(r.parentNode.tagName); 
 if (lastRow > 2 ) 
  {
  alert("i"+i);
  tbl.deleteRow(i);
  }
  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();
}

Thanks & Regards,
susan.

**dmjpro** · May 6 '09, 08:13 AM

Try this inside the remove function ...

Code:

for(var k=i;k<lastRow-1;k++){
 tbl.rows[k].cells[0].innerHTML = k+1;
}

delete row() dynamically

delete row() dynamically

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment