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
Asp & Javascript Dynamic Rows Example
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