DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Asp & Javascript Dynamic Rows Example

01.27.2010
| 2483 views |
  • submit to reddit
        asp & javascript dynamic rows example

<%
numRecords = 0

if Request.Form.count > 0 then
	' How many rows were submitted?
	numRows = cint( Request.Form("count") ) - 1 
	
	' Dim the arrays
	Response.write Execute( "Dim kbarticle( 100 )" )
	Response.write Execute( "Dim platform( 100 )" )
	Response.write Execute( "Dim desc( 100 )" )
	Response.write Execute( "Dim file( 100 )" )
	Response.write Execute( "Dim fileversion( 100 )" )
	Response.write Execute( "Dim branch( 100 )" )
	Response.write Execute( "Dim reboot( 100 )" )
	Response.write Execute( "Dim mbsa( 100 )" )
	Response.write Execute( "Dim packagename( 100 )" )
	Response.write Execute( "Dim packagesize( 100 )" )
	Response.write Execute( "Dim supercedes( 100 )" )
	Response.write Execute( "Dim save( 100 )" )
	Response.write Execute( "Dim delete( 100 )" )
	
	'fill with the values
		For Each x In Request.Form
			VarString = x & "=""" & Request.Form(x) & """"		
			Response.write Execute( VarString )
		Next
	
	
	'new associative array logic
	Dim RequestVars:Set RequestVars=New AssocArray
	for x=0 to numRows 
		RequestVars( x )("kbarticle") = kbarticle( x )
		RequestVars( x )("platform") = platform( x )
		RequestVars( x )("desc") = desc( x )
		RequestVars( x )("file") = file( x )
		RequestVars( x )("fileversion") = fileversion( x )
		RequestVars( x )("branch") = branch( x )
		RequestVars( x )("reboot") = reboot( x )
		RequestVars( x )("mbsa") = mbsa( x )
		RequestVars( x )("packagename") = packagename( x )
		RequestVars( x )("packagesize") = packagesize( x )
		RequestVars( x )("supercedes") = supercedes( x )
	next
	
	'show some output
	
	for i = 0 to (RequestVars.Count - 1)
		if RequestVars( i )("kbarticle") <> "" then
			strSql = ""
			strSql = "insert into patches (kbarticle,platform,desc,file,fileversion,branch,reboot,mbsa,packagename,packagesize,supercedes) values ("
			strSql = strSql & "'"  & RequestVars( i )("kbarticle")   & "'"
			strSql = strSql & ",'" & RequestVars( i )("platform")    & "'"
			strSql = strSql & ",'" & RequestVars( i )("desc")        & "'"
			strSql = strSql & ",'" & RequestVars( i )("file")        & "'"
			strSql = strSql & ",'" & RequestVars( i )("fileversion") & "'"
			strSql = strSql & ",'" & RequestVars( i )("branch")      & "'"
			strSql = strSql & ",'" & RequestVars( i )("reboot")      & "'"
			strSql = strSql & ",'" & RequestVars( i )("mbsa")        & "'"
			strSql = strSql & ",'" & RequestVars( i )("packagename") & "'"
			strSql = strSql & ",'" & RequestVars( i )("packagesize") & "'"
			strSql = strSql & ",'" & RequestVars( i )("supercedes")  & "'"
			strSql = strSql & ")" + "<br>"
			response.write "<pre>" & strSql & "</pre>"
		else
			strMessage = strMessage  &  "<span style='style4'><font color='red' size='3'><b>KB Article cannot be left blank.</b></font></span><br>"			
		End If
	next
End If
%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>MS10-001</title>
<style>

	#sb {
		margin: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: large;
		font-weight: bold;
		color: #800000;
		padding: 3px;
	}
	
	#kb {
		margin: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #000000;
		padding: 3px;
		padding-left: 8px;
	}
	
	#title {
		margin: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #000000;
		padding: 3px;
		padding-left: 8px;
	}
	
	#severity {
		margin: 0;
		text-align:right;
		font-family: Arial, Helvetica, sans-serif;
		font-size: medium;
		font-weight: bold;
		color: #FF3300;
		padding: 3px;
		padding-left: 8px;
	}
	
	#header {
		font-family: Arial, Helvetica, sans-serif;
		font-size: small;
		font-weight: bold;
		color: #000000;
		padding: 4px 4px 4px 4px;
		background-color: #E2DFA5;
		border-style: solid;
		border-width: 1px;
		border-color: #605E1A;
	}
	
	#data {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #000000;
		border-left-style: solid;
		border-left-width: 1px;
		border-left-color: #000000;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #000000;
		padding: 3px 3px 3px 3px;
	}
	
	#dataend {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #000000;
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #000000;
		border-right-style: solid;
		border-right-width: 1px;
		border-right-color: #000000;
		border-left-style: solid;
		border-left-width: 1px;
		border-left-color: #000000;
		padding: 3px 3px 3px 3px;
	}
	
	
	.style1 {
		text-align: center;
		vertical-align: middle;
	}
	
	.style4 {
		text-align: center;
		vertical-align: middle;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #FF0000;
	}
	
	.inputbox {
		width: 93%;
		height: 93%;
		text-align: left;
		vertical-align: middle;
		margin: 0px;
		border: 1px solid #000000;
		color: #000000;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		padding: 3px;
		background-color: #E8E7D2;
	}
	
	.dropbox {	
		margin: 0px;
		border: 1px solid #000000;
		color: #000000;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		padding: 2px;
		background-color: #E8E7D2;
	}
	
	#sblink {
		text-decoration: none;
		text-transform: none;
		color: #800000;
		font-weight: bold;
	}
	
	#smallsblink {
		text-decoration: none;
		text-transform: none;
		color: #800000;
	}
	
	#titlesmall {
		margin: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 9px;
		font-weight: normal;
		color: #000000;
		padding: 3px;
		padding-left: 8px;
	}
	
	#Abutton1 {
		border: 1px solid #000000;
		background-color: #E2DFA5;
		color: #800000;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
	}
	
	#Abutton2 {
		margin-top: 4px;
		margin-bottom: 4px;
		border: 1px solid #000000;
		background-color: #E2DFA5;
		color: #800000;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		font-weight: bold;
	}

	.style4 {
		text-align: center;
		vertical-align: middle;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		font-weight: bold;
		color: #FF0000;
		padding: 8px;
		border: 1px solid #000000;
		background-color: #EEEEEE;
	}

</style>

<SCRIPT LANGUAGE="JavaScript">
  function removerow(id) {
	  var tr = document.getElementById(id);
	  if (tr) {
	    if (tr.nodeName == 'TR') {
	      var tbl = tr; 
	      while (tbl != document && tbl.nodeName != 'TABLE') {
	        tbl = tbl.parentNode;
	      }
	      if (tbl && tbl.nodeName == 'TABLE') {
	        while (tr.hasChildNodes()) {
	          tr.removeChild( tr.lastChild );
		        }
	      tr.parentNode.removeChild( tr );
	      }
	    }
			document.getElementById('counter').value --;
	  }
		if (document.getElementById('counter').value < 0) {
			document.getElementById('counter').value = 0;
		}
		if ( document.getElementById('counter').value == 0) {
			addEmptyRow('myTable');
		}
	}
	
  function removeheaderrow(id) {
	  var tr = document.getElementById(id);
	  if (tr) {
	    if (tr.nodeName == 'TR') {
	      var tbl = tr; 
	      while (tbl != document && tbl.nodeName != 'TABLE') {
	        tbl = tbl.parentNode;
	      }
	      if (tbl && tbl.nodeName == 'TABLE') {
	        while (tr.hasChildNodes()) {
	          tr.removeChild( tr.lastChild );
	        }
		      tr.parentNode.removeChild( tr );
	      }
	    }
	  }
	}

	function addRow( id ){
		var counter = document.getElementById('counter').value;
		document.getElementById('counter').value ++;
		var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
	  var row  = document.createElement("TR");
		row.setAttribute("id","row" + counter );
		row.setAttribute("class","style1" );
    var td1  = document.createElement("TD");
		var td2  = document.createElement("TD");
		var td3  = document.createElement("TD");
		var td4  = document.createElement("TD");
		var td5  = document.createElement("TD");
		var td6  = document.createElement("TD");
		var td7  = document.createElement("TD");
		var td8  = document.createElement("TD");
		var td9  = document.createElement("TD");
		var td10 = document.createElement("TD");
		var td11 = document.createElement("TD");
		var td12 = document.createElement("TD");

		var column1 = document.createElement("input");  
    column1.type = "text";
		column1.name = "kbarticle(" + counter + ")";
		column1.setAttribute("id","kbarticle" + counter);
		column1.setAttribute("class","inputbox");
		td1.appendChild( column1 );
		
		var column2 = document.createElement("input");  
    column2.type = "text";
		column2.name = "desc(" + counter + ")";
		column2.setAttribute("id","desc" + counter);
		column2.setAttribute("class","inputbox");
		td2.appendChild( column2 );

		var column3 = document.createElement("input");  
    column3.type = "text";
		column3.name = "platform(" + counter + ")";
		column3.setAttribute("id","platform" + counter);
		column3.setAttribute("class","inputbox");
		td3.appendChild( column3 );

		var column4 = document.createElement("input");  
    column4.type = "text";
		column4.name = "branch(" + counter + ")";
		column4.setAttribute("id","branch" + counter);
		column4.setAttribute("class","inputbox");
		td4.appendChild( column4 );

		var column5 = document.createElement("input");  
    column5.type = "text";
		column5.name = "file(" + counter + ")";
		column5.setAttribute("id","file" + counter);
		column5.setAttribute("class","inputbox");
		td5.appendChild( column5 );
		
		var column6 = document.createElement("input");  
    column6.type = "text";
		column6.name = "fileversion(" + counter + ")";
		column6.setAttribute("id","fileversion" + counter);
		column6.setAttribute("class","inputbox");
		td6.appendChild( column6 );

		var column7 = document.createElement("select");
		col7opt1 = document.createElement("OPTION");
		opt1text = document.createTextNode("Yes");
		col7opt1.setAttribute("value","Y");
		col7opt1.appendChild(opt1text);
		
		col7opt2 = document.createElement("OPTION");
		opt2text = document.createTextNode("No");
		col7opt2.setAttribute("value","N");
		col7opt2.appendChild(opt2text);		

		column7.appendChild(col7opt1);
		column7.appendChild(col7opt2);
		
		column7.name = "mbsa(" + counter + ")";
		column7.setAttribute("id","mbsa" + counter);
		column7.setAttribute("class","dropbox");
		td7.appendChild( column7 );
				
		var column8 = document.createElement("select");
		col8opt1 = document.createElement("OPTION");
		col8opt1text = document.createTextNode("Yes");
		col8opt1.setAttribute("value","Y");
		col8opt1.appendChild(col8opt1text);
		
		col8opt2 = document.createElement("OPTION");
		col8opt2text = document.createTextNode("No");
		col8opt2.setAttribute("value","N");
		col8opt2.appendChild(col8opt2text);		

		col8opt3 = document.createElement("OPTION");
		col8opt3text = document.createTextNode("No*");
		col8opt3.setAttribute("value","N*");
		col8opt3.appendChild(col8opt3text);		

		column8.appendChild(col8opt1);
		column8.appendChild(col8opt2);
		column8.appendChild(col8opt3);
		
		column8.name = "reboot(" + counter + ")";
		column8.setAttribute("id","reboot" + counter);
		column8.setAttribute("class","dropbox");
		td8.appendChild( column8 );
		
		var column9 = document.createElement("input");  
    column9.type = "text";
		column9.name = "packagename(" + counter + ")";
		column9.setAttribute("id","packagename" + counter);
		column9.setAttribute("class","inputbox");
		td9.appendChild( column9 );

		var column10 = document.createElement("input");  
    column10.type = "text";
		column10.name = "packagesize(" + counter + ")";
		column10.setAttribute("id","packagesize" + counter);
		column10.setAttribute("class","inputbox");
		td10.appendChild( column10 );

		var column11 = document.createElement("input");  
    column11.type = "text";
		column11.name = "supercedes(" + counter + ")";
		column11.setAttribute("id","supercedes" + counter);
		column11.setAttribute("class","inputbox");
		column11.setAttribute("value","NONE");
		td11.appendChild( column11 );

		txtHTML =  '<button onclick="alert(this.name);" name="save(' + counter + ')" id="Abutton1" value="Save">Save</button>\n';
		txtHTML += '<button onclick="removerow(\'row' + counter + '\');" name="delete(' + counter + ')" id="Abutton1" value="Delete">Delete</button>';
		td12.innerHTML=txtHTML;
		td12.setAttribute("nowrap","nowrap");		
		td1.setAttribute("id","data");
		td2.setAttribute("id","data");
		td3.setAttribute("id","data");
		td4.setAttribute("id","data");
		td4.setAttribute("class","style1");
		td4.setAttribute("align","center");
		td5.setAttribute("id","data");
		td5.setAttribute("class","style1");
		td5.setAttribute("align","center");
		td6.setAttribute("id","data");
		td6.setAttribute("class","style1");
		td6.setAttribute("align","center");
		td7.setAttribute("id","data");
		td7.setAttribute("class","style1");
		td7.setAttribute("align","center");
		td8.setAttribute("id","data");
		td8.setAttribute("class","style1");
		td8.setAttribute("align","center");
		td9.setAttribute("id","data");
		td9.setAttribute("class","style1");
		td9.setAttribute("align","center");
		td10.setAttribute("id","data");
		td10.setAttribute("class","style1");
		td10.setAttribute("align","center");
		td11.setAttribute("id","data");
		td11.setAttribute("class","style1");
		td11.setAttribute("align","center");
		td12.setAttribute("id","dataend");
		td12.setAttribute("class","style1");
		td12.setAttribute("align","center");
    row.appendChild(td1);
		row.appendChild(td2);
		row.appendChild(td3);
		row.appendChild(td4);
		row.appendChild(td5);
		row.appendChild(td6);
		row.appendChild(td7);
		row.appendChild(td8);
		row.appendChild(td9);
		row.appendChild(td10);
		row.appendChild(td11);
		row.appendChild(td12);
		tbody.appendChild(row);
		var newrow = document.getElementById("row" + counter);
		newrow.style.display="none";
		newrow.style.display="";		
		return "row" + counter;
  }
	
	function addEmptyRow( id ){
		var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
	  var row  = document.createElement("TR");
		row.setAttribute("id","rowempty");
    var td1  = document.createElement("TD");
		td1.setAttribute('colspan','12');
		td1.setAttribute('class','style4');
		td1.setAttribute('align','center');
		td1.innerHTML='No Records Found<br>';		    
		row.appendChild(td1);
		tbody.appendChild(row);		
	}
	
	function cycleRow( id ){
		var newrow = document.getElementById(id);
		newrow.className = newrow.className + ' foo';
		alert(id + "-" + newrow.className);
	}

</script>
</head>
<body>
<form name="myForm" id="myForm" method="post" action="">
<div style="width: 1200px; margin-right: 10px; text-decoration: none;">
<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<span id="sb"><a id="sblink" href="http://www.microsoft.com/technet/security/bulletin/ms10-001.mspx">MS10-001</a></span><span id="kb">KB971270</span><span id="title">Vulnerability in the Embedded OpenType Font Engine Could Allow Remote Code Execution</span><span id="severity">Critical   </span>
		</td>
		<td align="right">
			<span id="titlesmall" style="text-align:right;">Export to Excel  <img src="../icons/page_white_excel.png" class="style2" /></span>
		</td>
	</tr>
	<tr>	
	<td colspan="2"><hr noshade="noshade" class="style3" /></td>
	</tr>
</table>
<table id="myTable" width="100%" cellpadding="0" cellspacing="0">
	<thead>
	<tr>
		<td id="header">KB</td>
		<td id="header">Product</td>
		<td id="header">Platform</td>
		<td id="header">Branch</td>
		<td id="header">Validation File</td>
		<td id="header">Min. Version</td>
		<td id="header">MBSA</td>
		<td id="header">Reboot</td>
		<td id="header">Package Name</td>																
		<td id="header">Pkg Size</td>																
		<td id="header">Supercedes</td>																		
		<td id="header" class="style1">Action</td>																		
	</tr>
	</thead>
	<tbody>
<%
if numRecords = 0 then
%>
		<tr id="rowempty">
			<td colspan="12" class="style4" align="center">No Records Found<br><%= strMessage %></td>																		
		</tr>		
<%
End If
%>
	</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
	<td style="padding:4px;">
	<button onclick="cycleRow( addRow('myTable') ) ;removeheaderrow('rowempty');return false;" name="submit" id="Abutton2" value="Add New">Add New</button>
	</td>
	<td align="right" style="padding:4px;">
	<input type="submit" onclick="" name="submit" id="Abutton2" value="Save All">
	</td>
	</tr>
</table>
<%
if numRecords = 0 then 
%>
<input name="count" type="text" value="0" id="counter">
<%
else
%>
<input name="count" type="text" value="<%= numRecords %>" id="counter">
<%
End If
%>

</div>
</form>
</body>
</html>
<%

Class AssocArray
	Private dicContainer
	Private Sub Class_Initialize()
		Set dicContainer=Server.CreateObject("Scripting.Dictionary")
	End Sub

	Private Sub Class_Terminate()
		Set dicContainer=Nothing
	End Sub

	Public Function Exists(sName)
		If Not dicContainer.Exists(sName) Then
			Exists = ""
		Else
			Exists = Item(sName)
		End If
	End Function

	Public Function Count()
		Count = dicContainer.Count
	End Function

	Public Default Property Get Item(sName)
		If Not dicContainer.Exists(sName) Then
			dicContainer.Add sName,New AssocArray
		End If
	
		If IsObject(dicContainer.Item(sName)) Then
			Set Item=dicContainer.Item(sName)
		Else
			Item=dicContainer.Item(sName)
		End If
	End Property

	Public Property Let Item(sName,vValue)
		If dicContainer.Exists(sName) Then
			If IsObject(vValue) Then
				Set dicContainer.Item(sName)=vValue
			Else
				dicContainer.Item(sName)=vValue
			End If
		Else
			dicContainer.Add sName,vValue
		End If
	End Property
End Class

%>
    

Comments

Snippets Manager replied on Sun, 2010/10/24 - 4:31pm

Dear David, This code is exactly what I need but when I try to use it it shows some errors. Are you willing to help me with this? If so how can I get in touch with you? Many thanks, Debbie