Question

Dynamic Table Creation in Javascript - Add Row, Remove Row, Toggle Row

Asked by: dtreadway7

I am new to dynamic table creation. This table is simple in concept.

Can add as many tables as nec. Each table can add/delete/toggle rows.

Table row 1): Cell1:Title, Cell2:Min/Max, Cell3:closeTable
Table row 2): Cell1:Content(form), Cell2:min/max, Cell3:move row up or down, Cell4:delete this row
Table row 3): Cell1: "Add Additional row to table" link.

Of course, this object and uses "this" keyword. No "getElementById()" used in this one. I am close but am running into some walls. Major wall: Is my table structure right where I am adding the (dContent). Should I be iterating many different (dContent) objects per row and then append the content to them? Should I remove the (dConetnt) object altogeather and track each row inIndex?

The "onchange" select functions are a separate piece. I am planning appending the forms dynamically as well but, I have that piece under control. So for now just ignore the form behavior inside the rows.

Any help is appreciated.

...Day 2 afer posting. Still nothing. I mean, I am making progress but, it sure would be nice if someone could help speed up the process. Up to this point was fairly easy. If I could use an ID reference it would be even eaiser. But I can't. The tracking of the rowIndex should'nt be nec since I am putting it in a parent object. I should just be able to move/ remove/ hide, the object. I tried some variations of (this.dConent.childNode(getElementByTagName="TR) +rowIndex), and (if(this.dContent.parentNode...) but I am still missing something.  Also, now my hide/show toggle is not workin correctly for the added rows. It will open and close once. This I know is because of how I am repeatedly appending the content back into the (dContent) object. I tried just setting the (dContent) object style to display:none...worked better but it also destroys my table structure and moves the row controls to the bottom. Again, the structure is bad I think.    

Bout to trash it and rewrite with a non Obj (id="id' +i'")..guess I can track the rows (inRowIndex) that way too. It seems awfully long and nasty though, when I am so close.

<html>
<head>
 
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
		s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Window Function
function DTWindow(title, dContent)
{
	// save arguments
	this.title = title;
	this.dContent = dContent;
 
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	this.dMinTD.innerHTML = "_";
	this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
	// add row for window content
	// a single cell the same width as the title bar row
	dTR = this.dTable.insertRow(1);
	dTD = dTR.insertCell(0);
	dTD.colSpan = 3;
	dTD.appendChild(dContent);
	
	this.dTogTD = dTR.insertCell(1);
	this.dTogTD.innerHTML = "-";
	this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	this.dTogTD.DTWindow = this;
	
	this.dTD = dTR.insertCell(2);
	this.dTD.DTWindow = this;	
	this.dTD.innerHTML = "<div>^</div>";
		
	this.dDelTD = dTR.insertCell(3);
	this.dDelTD.innerHTML = "X";
	this.dDelTD.onmousedown = DTWindow.prototype.onClose;
	this.dDelTD.DTWindow = this;
 
}
 
 
 
 
 
DTWindow.prototype.RemoveRow = function()
{	
	
	// remove from browser document
		this.dContent.parentNode.removeChild(this.dContent);
				this.dContent.parentNode.removeChild(this.deleteRow);
	
	//this.dTable.parentNode.removeChild(this.dTable.);
  }
	
  DTWindow.prototype.onRemoveRow = function()
  {
	this.DTWindow.RemoveRow();
}
 
 
 
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function()
{
	
	dTR2 = this.dTable.insertRow(2);
	dTD2 = dTR2.insertCell(0);
	dTD2.setAttribute("colSpan", 4);
	dTD2.innerHTML = "<form name=form style='display:;'><div><table align='center' class='selectionForm' border='1'><tr><td nowrap>Field:</td><td><select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'><option value='0' selected>[SELECT]</option><option value='1'>Employment</option><option value='2'>State</option><option value='3'>Other</option></select></td></tr><tr><td>Operator:</td><td><select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'><option value='0' selected>[SELECT]</option></select></td></tr><tr><td>Compare With:</td><td><select id='thirdChoice' name='thirdChoice'><option value='0' selected>[SELECT]</option></select></td><td><div id='fourthChoice' style='display:none;'><input type='text' size='30'></div></td></tr></table></div></form>";
	
	dTR = this.dTable.insertRow(2);
	dTD = dTR.insertCell(0);
	dTD.innerHTML = "<div>This Row Name</div>";
	
	dTD = dTR.insertCell(1);
	dTD.DTWindow = this;	
	dTD.innerHTML = "<div>edit</div>";
	
	dTD = dTR.insertCell(2);
	dTD.DTWindow = this;	
	dTD.innerHTML = "<div>^</div>";
	
	dTD = dTR.insertCell(3);
	dTD.DTWindow = this;	
	dTD.innerHTML = "<div>X</div>";
	dTD.onmousedown = DTWindow.prototype.onRemoveRow;
	
	//this.dTable.deleteRow(1);
}
 
 
DTWindow.prototype.onMinimize = function()
{
	this.DTWindow.minimize();
}
DTWindow.prototype.minimize = function()
{
	// hide the content
	this.dContent.style.visibility = "hidden";
	this.dContent.style.position = "relative";
	document.body.appendChild(this.dContent);
	
	//this.dTable.deleteRow(1);
	this.dMinTD.innerHTML = "+";
	this.dMinTD.onmousedown = DTWindow.prototype.onMaximize;
}
 
DTWindow.prototype.onMaximize = function()
{
  this.DTWindow.maximize();
}
  DTWindow.prototype.maximize = function()
  {
	// add the content again.
	dTR = this.dTable.insertRow(1);
	dTD = dTR.insertCell(0);
	dTD.colSpan = 3;
	
	dTD.appendChild(this.dContent);
	this.dContent.style.visibility = "visible";
	this.dMinTD.innerHTML = "--";
	this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
  }
  DTWindow.prototype.onMaximize = function()
  {
	this.DTWindow.maximize();
}
	
  //Toggle Row hide/show	(RowMin
  DTWindow.prototype.onRowMin = function()
  {
  	this.DTWindow.RowMin();
  }
  DTWindow.prototype.RowMin = function()
  {
  	// hide the content
  	this.dContent.style.visibility = "hidden";
	  this.dContent.style.position = "relative";
	  document.body.appendChild(this.dContent);
  	this.dTogTD.innerHTML = "+";
  	this.dTogTD.onmousedown = DTWindow.prototype.onRowMax;
  }
 
  //Toggle Row hide/show	(RowMax)
 
	DTWindow.prototype.onRowMax  = function()
  {
  this.DTWindow.RowMax();
  }
  DTWindow.prototype.RowMax = function()
  {
	// add the content again.
	  dTR = this.dTable.insertRow(1);
	  dTD = dTR.insertCell(0);
	  dTD.colSpan = 3;
	
	  dTD.appendChild(this.dContent);
	  this.dContent.style.visibility = "visible";
  	this.dTogTD.innerHTML = "+";
  	this.dTogTD.onmousedown = DTWindow.prototype.onRowMax;
  }
  DTWindow.prototype.onRowMax  = function()
  {
	this.DTWindow.RowMax();
}
	
	
DTWindow.prototype.close = function()
{	
	// remove content from browser document
	this.dContent.parentNode.removeChild(this.dContent);
	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "250px";
	dDiv.style.height = "80px";
	dDiv.innerHTML = "<form name=form style='display:;'><div><table align='center' class='selectionForm' border='1'><tr><td nowrap>Field:</td><td><select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'><option value='0' selected>[SELECT]</option><option value='1'>Employment</option><option value='2'>State</option><option value='3'>Other</option></select></td></tr><tr><td>Operator:</td><td><select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'><option value='0' selected>[SELECT]</option></select></td></tr><tr><td>Compare With:</td><td><select id='thirdChoice' name='thirdChoice'><option value='0' selected>[SELECT]</option></select></td><td><div id='fourthChoice' style='display:none;'><input type='text' size='30'></div></td></tr></table></div></form>";
	new DTWindow(document.getElementById('wName').value, dDiv);
}
 
</script>
</head>
 
 
<body >
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                  
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:

Select allOpen in new window

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2008-03-14 at 11:31:54ID23242618
Tags

Javascript

,

FF, IE6, IE7, Safari

Topics

Dynamic HTML (DHTML)

,

JavaScript

,

Scripting Languages

Participating Experts
1
Points
500
Comments
245

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. javascript toggle
    I have a javascript toggle function below, and I am trying to figure out how I can replace the images with plus and minus images based on the expanding and collapsing of the menu's. See code below: function Toggle(item) { obj=document.getElementById(item); visible=...
  2. Javascript Array iteration and removal
    I want to create a Javascript Array using a form select box that the user would click and create said array. The code below will show a functional selectbox which adds selections into a text area. I cannot figure out how to iterate the array so that everytime the select box...
  3. toggle
    hi, Please assist how can we toggle the value of a button? toggle between "Edit" and "Cancel" Thanks. <script language="JavaScript"> var shown=false; function toggle(id) { for(i = 1; i <= 15; i+=2) {var e = "_edt"+i;documen...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: dtreadway7Posted on 2008-03-17 at 08:09:26ID: 21142854

Day 4: still no contacts form any experts. It is St. Patty's though so maybe I will get lucky! Here what I got so far. I realize that many problems exist with this table and tracking the rows. I now can correctly add a row. I modified the addRow function and now set the (dTable.rows.length) as my (rows) variable that I pass to get an accurate place of the row at the end of the table, but before the table footer.

The removeRow() function is not so easy though. I am not creating a form element into a fourth cell on the new row, and I am to set a value that is the form value of the current row at the time it is created. I am now trying to access that value for (this.dTable.deleteRow(rowNum)). Not working very well though. Any help today? Below is the new code:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
		s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Window Function
function DTWindow(title, dContent)
{
	// save arguments
	this.title = title;
	this.dContent = dContent;
 
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize function will be moved to the rows only, just a place holder for now
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
	// add row for window content
	// a single cell the same width as the title bar row
	dTR = this.dTable.insertRow(1);
	dTD = dTR.insertCell(0);
	dTD.colSpan = 3;
	dTD.appendChild(dContent);
	
	this.dTogTD = dTR.insertCell(1);
	this.dTogTD.innerHTML = "-";
	this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	this.dTogTD.DTWindow = this;
	
	this.dTD = dTR.insertCell(2);
	this.dTD.DTWindow = this;	
	this.dTD.innerHTML = "<div>^</div>";
		
	this.dDelTD = dTR.insertCell(3);
	this.dDelTD.innerHTML = "X";
	this.dDelTD.onmousedown = DTWindow.prototype.onClose;
	this.dDelTD.DTWindow = this;
}
 
 
 
 
 
DTWindow.prototype.RemoveRow = function()
{	
	var rowNum = this.dInput.value;
	//rowNum = this.dHidTD.ID//this.dHidTD.value = rowNum;
  alert(rowNum);
	this.dTable.deleteRow(rowNum);	
  }	
  DTWindow.prototype.onRemoveRow = function()
  {
	this.DTWindow.RemoveRow();
}
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function()
{
 // get the number of table rows in dTable 
 var rowIndex;
	var rows = this.dTable.rows.length;rows--;
  //insert row at end of rows (-1 ) so  the new row comes in before the table footer
	var dTR = this.dTable.insertRow(rows);
		
	dTR.className = "";
	dTD = dTR.insertCell(0);
	dTD.colSpan = 3;
	dTD.innerHTML = "<form name=form style='display:;'><div><table align='center' class='selectionForm' border='1'><tr><td nowrap>Field:</td><td><select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'><option value='0' selected>[SELECT]</option><option value='1'>Employment</option><option value='2'>State</option><option value='3'>Other</option></select></td></tr><tr><td>Operator:</td><td><select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'><option value='0' selected>[SELECT]</option></select></td></tr><tr><td>Compare With:</td><td><select id='thirdChoice' name='thirdChoice'><option value='0' selected>[SELECT]</option></select></td><td><div id='fourthChoice' style='display:none;'><input type='text' size='30'></div></td></tr></table></div></form>";
	
	this.dTogTD = dTR.insertCell(1);
	this.dTogTD.innerHTML = "-";
	this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	this.dTogTD.DTWindow = this;
	
	this.dTD = dTR.insertCell(2);
	this.dTD.DTWindow = this;	
	this.dTD.innerHTML = "<div>^</div>";
		
	this.dDelTD = dTR.insertCell(3);
	this.dDelTD.innerHTML = "X";
	
	this.dDelTD.DTWindow = this;
	
	this.dInput = document.createElement("INPUT");
	this.dInput.value = rows +1;
	this.dHidTD = dTR.insertCell(4);
	//this.dHidTD.innerHTML = rows +1;
	this.dHidTD.appendChild(this.dInput);
	this.dInput.onmousedown = DTWindow.prototype.onRemoveRow;
	this.dInput.DTWindow = this;
	this.dHidTD.DTWindow = this;
	//alert(rows);
}
 
 
DTWindow.prototype.onMinimize = function()
{
	this.DTWindow.minimize();
}
DTWindow.prototype.minimize = function()
{
	// hide the content change to diplay none and stopped re-appending the content
	this.dContent.style.display = "none";
	this.dContent.style.position = "relative";
	this.dMinTD.innerHTML = "+";
	this.dMinTD.onmousedown = DTWindow.prototype.onMaximize;
}
 
DTWindow.prototype.onMaximize = function()
{
  this.DTWindow.maximize();
}
  DTWindow.prototype.maximize = function()
  {
	// no more add the content again., changed to display none
	this.dContent.style.display = "block";
	this.dMinTD.innerHTML = "--";
	this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
  }
  DTWindow.prototype.onMaximize = function()
  {
	this.DTWindow.maximize();
}
	
  //Toggle Row hide/show	(RowMin
  DTWindow.prototype.onRowMin = function()
  {
  	this.DTWindow.RowMin();
  }
  DTWindow.prototype.RowMin = function()
  {
  	// hide the content
  	this.dTogTD.parentNode.style.display = "none";
	 	this.dTogTD.innerHTML = "+";
  	this.dTogTD.onmousedown = DTWindow.prototype.onRowMax;
  }
 
  //Toggle Row hide/show	(RowMax)
 
	DTWindow.prototype.onRowMax  = function()
  {
  this.DTWindow.RowMax();
  }
  DTWindow.prototype.RowMax = function()
  {
	// add the content again.
	  //dTR = this.dTable.insertRow(1);
	  //dTD = dTR.insertCell(0);
	  //dTD.colSpan = 3;
	
	//  dTD.appendChild(this.dContent);
	  //this.dContent.style.visibility = "visible";
		this.dContent.style.display = "block";
		
  	this.dTogTD.innerHTML = "+";
  	this.dTogTD.onmousedown = DTWindow.prototype.onRowMax;
  }
  DTWindow.prototype.onRowMax  = function()
  {
	this.DTWindow.RowMax();
}
	
	
DTWindow.prototype.close = function()
{	
	// remove content from browser document . This won't be needed after I g et the rowIndex working properly, the row won't exist and neither will this (dContent)
	this.dContent.parentNode.removeChild(this.dContent);
	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "250px";
	dDiv.style.height = "80px";
	dDiv.innerHTML = "<form name=form style='display:;'><div><table align='center' class='selectionForm' border='1'><tr><td nowrap>Field:</td><td><select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'><option value='0' selected>[SELECT]</option><option value='1'>Employment</option><option value='2'>State</option><option value='3'>Other</option></select></td></tr><tr><td>Operator:</td><td><select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'><option value='0' selected>[SELECT]</option></select></td></tr><tr><td>Compare With:</td><td><select id='thirdChoice' name='thirdChoice'><option value='0' selected>[SELECT]</option></select></td><td><div id='fourthChoice' style='display:none;'><input type='text' size='30'></div></td></tr></table></div></form>";
	new DTWindow(document.getElementById('wName').value, dDiv);
}
 
</script>
</head>
 
 
<body >
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-17 at 08:14:29ID: 21142914

Ooops! "I am not creating a form element..." on the previous post, should be = "I am NOW creating a form element...).

 

by: HonorGodPosted on 2008-03-17 at 09:27:34ID: 21143682

Just noticed this.  Sorry for the delay.

Even though you don't see it (most) html, you really need to create a TBODY element in your table.

The original question does not create or use a tbody element.

In order to see what is happening, it would help to have access to drillDowns.js and any other javascript files referenced by that file.

 

by: dtreadway7Posted on 2008-03-17 at 11:00:04ID: 21144532

Ok, no problem.  Also, I found another script that is making some good progress. It makes it a little easier since I can now move my delete row into a public function.

Here is the drillDowns.js.

 

var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
 
arrItems1[3] = "= (equal to St1)";
arrItemsGrp1[3] = 1;
arrItems1[4] = "= (equal to St2)";
arrItemsGrp1[4] = 1;
arrItems1[5] = "= (equal to St3)";
arrItemsGrp1[5] = 1;
 
arrItems1[6] = "= (equal to Emp1)";
arrItemsGrp1[6] = 2;
arrItems1[7] = "= (equal to Emp2)";
arrItemsGrp1[7] = 2;
 
arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;
 
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
 
arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0
 
arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1
 
arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2
 
arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5
 
arrItems2[101] = "Full-Time";
arrItemsGrp2[101] = 3
arrItems2[102] = "Part-Time";
arrItemsGrp2[102] = 3
 
arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4
 
arrItems2[105] = "Value";
arrItemsGrp2[105] = 6
arrItems2[106] = "Value2";
arrItemsGrp2[106] = 6
 
arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7
 
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
 
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "[SELECT]" ;
 
  controlToPopulate.appendChild(myEle)
 
  for ( x = 0 ; x < ItemArray.length; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      myEle.setAttribute('value',x);
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      controlToPopulate.appendChild(myEle)
    }
  }
}
 
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
 
  myEle=document.createElement("option");
  theText=document.createTextNode("[SELECT]");
  myEle.appendChild(theText);
  myEle.setAttribute("value","0");
  controlToPopulate.appendChild(myEle);
 
  for ( x = 0 ; x < ItemArray.length; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      myEle.setAttribute("value",x);
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      controlToPopulate.appendChild(myEle)
    }
  }
}

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-17 at 11:01:53ID: 21144554

Also, here is a new piece of script that I am adding the delete and addRow.  AddRow is still private but the delete is not. Also, it reorders my rows. Here is what I have so far, I think I am finally moving in the right direction. 

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
		s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var RADIO_NAME = 'totallyrad'; // this is being set via script
var TABLE_NAME = 'tblSample'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = true;
 
//Window Function
function DTWindow(title, dContent)
{
	// save arguments
	this.title = title;
	this.dContent = dContent;
	//this.dContent = "<form name=form><div><table align='center' class='selectionForm' border='1'><tr><td nowrap>Field:</td><td><select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'><option value='0' selected>[SELECT]</option><option value='1'>Employment</option><option value='2'>State</option><option value='3'>Other</option></select></td></tr><tr><td>Operator:</td><td><select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'><option value='0' selected>[SELECT]</option></select></td></tr><tr><td>Compare With:</td><td><select id='thirdChoice' name='thirdChoice'><option value='0' selected>[SELECT]</option></select></td><td><div id='fourthChoice' style='display:none;'><input type='text' size='30'></div></td></tr></table></div></form>";
	//this.dContentP = dContentP;
	
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
	// add row for window content
	// a single cell the same width as the title bar row
	//dTR = this.dTable.insertRow(1);
	//dTD = dTR.insertCell(0);
	//dTD.colSpan = 3;
	//dTD.appendChild(dContent);
	
	//this.dTogTD = dTR.insertCell(1);
	//this.dTogTD.innerHTML = "-";
	//this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	//this.dTogTD.DTWindow = this;
	
	//this.dTD = dTR.insertCell(2);
	//this.dTD.DTWindow = this;	
	//this.dTD.innerHTML = "<div>^</div>";
		
	//this.dDelTD = dTR.insertCell(3);
	//this.dDelTD.innerHTML = "X";
	//this.dDelTD.onmousedown = DTWindow.prototype.onClose;
	//this.dDelTD.DTWindow = this;
}
 
 
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		
		// CONFIG: requires classes named classy0 and classy1
		row.className = 'classy' + (iteration % 2);
	
		// CONFIG: This whole section can be configured
		
		// cell 0 - text
		var cell0 = row.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = row.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = row.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = row.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = row.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
 
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-17 at 11:09:48ID: 21144613

Thanks "HonorGod" for getting back to me. Notice too, that my i(addCurrentRow(this)) now adds the row in the correct place but it does it in a weird way and doesnt track the rowNum correctly, It does reorder correctly though if they are deleted. I realize that this would be a great candidate for a private(Func) since It would benefit me to get that (tbl = this.dTable.rows) reference.

K, ive confused you enough now. I'll let you do your expert thang. Thanks again!

 

by: HonorGodPosted on 2008-03-17 at 12:09:03ID: 21145123

At what would you like me to look first?

The addCurrentRow?

 

by: dtreadway7Posted on 2008-03-17 at 12:20:11ID: 21145243

Um...sure. If I can add the current in place then I dont need to move the row up or down. So it would save time. However, once I do that, I have a little trickier problem, which is that I will need to put that form into a hideable object in that row. So, imagine if you will that each row will have:

table Header:
   NewRow:
   cell1: form content (hideable)
   cell2:addRowIn current position
   cell3: and deleteRow.
footer

Conceptually easy, but then again so is going from the earth to the moon. Damn Rocketship makes it hard though.

So you pick. And sorry for the uncleanlyness of my code. Looks like 10 script kitties came over and spent the night on my computer. :)

 

by: HonorGodPosted on 2008-03-17 at 12:32:12ID: 21145339

Part of the problem with addCurrentRow() is that you have it coded to apparent expect a row number or something:

  function addCurrentRow( num ) {
    if ( num == null ) {
      num = nextRow;
    } else {
      iteration = num + ROW_BASE;
    }

but what you are passing is a button object:

raEl.onclick = function () {addCurrentRow( this )};

  So, when the Add button is clicked, the object reference to this button is being passed to the addCurrentRow function.

 

by: HonorGodPosted on 2008-03-17 at 12:34:12ID: 21145352

Sorry, but I don't understand what you are trying to convey in your most recent update to this thread.

Are you saying that within each row you want a nested table?

 

by: dtreadway7Posted on 2008-03-17 at 12:39:04ID: 21145390

No, no not a nested table I mean in each row, the first cell, would be (collapse/exapnd), so like maybe a dive or seomthing in the first cell that can be collapsed by a cell in the same row:

[table header]
 <tr><td><div><form></div></td><td>+/-</td><td>[insertRowHere]</td><td>[delete this row]</td></tr>
[table footer: "Add New Row"]

Sorry for the confusion.

 

by: dtreadway7Posted on 2008-03-17 at 12:49:47ID: 21145472

I cleaned up the mess a little bit too. I had left some things in there from the original version. Here is a new one if it helps. I know this thread is getting long. And thank you for pointing out that target problem on the button, Easy to get confused when using "this" so many times.

The check boxes, radio, etc that are there now will be replaced with buttons:

<tr><td>[collapsible form or div or whatever]</td><td>[+/-]</td><td>[insert row here]</td><td>[delete row]</td></tr>


<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
 
</style>
<script language=javascript>
 
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
}
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
		
		// cell 0 - text
		var cell0 = row.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = row.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); /
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = row.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = row.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = row.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
	}
}
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
		var iteration = num + ROW_BASE;
    var row = tbl.insertRow(num);
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-17 at 12:51:00ID: 21145488

Let's take a look at what the table looks like after you first click the "Create New Window" button:

<table>
<tbody>
  <tr>
    <td>A</td>
    <td></td>
    <td>X</td>
  </tr>
  <tr>
    <td colspan='3'>Add Another Ctieria Set</td>
  </tr>
</tbody>
</table>

Does this make sense?

 

by: HonorGodPosted on 2008-03-17 at 12:51:49ID: 21145499

Ah, ok, that sounds promising.  Let me take a look now.

 

by: HonorGodPosted on 2008-03-17 at 13:04:10ID: 21145603

The beginning of addCurrentRow() still doesn't make sense, given that the calls to this routine are all of the form:

addCurrentRow( this )  


    if ( num == null ) {
      num = nextRow;                                       // This is an integer value
    } else {
      iteration = num + ROW_BASE;                 // This is adding an integer to an object reference
    }


Here are the steps I performed:
- Select the "New Window" text in the input box
- Type "A" (i.e., capital A)
- Click "Create New Window" button
- Click on the "Add Another Ctieria Set" text  (should that be "Criteria"?)
  And it looks like:

 

by: HonorGodPosted on 2008-03-17 at 13:05:15ID: 21145615

What do you want it to look like after the user:

- checks the checkbox
- clicks on the AddRow button?

 

by: HonorGodPosted on 2008-03-17 at 13:14:38ID: 21145701

Interestingly enough, if we again click on the "Add Another Ctieria Set" text, the table looks like:

 

by: HonorGodPosted on 2008-03-17 at 13:15:42ID: 21145710

How should this differ from using the "AddRow" button?

Also, since you have both an Add and Delete button for each row, why do you have the checkbox, and what role is it supposed to perform?

 

by: dtreadway7Posted on 2008-03-17 at 13:25:33ID: 21145789

Ok , I see:

Add Another criteria = add a row to the end of the table (before the "add another criteria set text)
Add Row = addRow in this row index. (add it right here in this position, not at the end of the row (-1))
delete = delete this row.

and of course we will be adding new one, which will show or hide the first cell of the table.

The row inputs that are there now, and the checkbox will not be there. In the place where the <input> is we will have the form from the original script. So imagain that the input that is there now will be a div (in the row) that will be expandable/collapsible.

 

by: HonorGodPosted on 2008-03-17 at 13:35:44ID: 21145875

ok, so what does/should a new "row" look like?

 

by: dtreadway7Posted on 2008-03-17 at 13:40:00ID: 21145916

Like this:

+(toggle this row form)
ah = add row here
d = delete this row

 

by: dtreadway7Posted on 2008-03-17 at 13:42:11ID: 21145926

The row name will be derived from the form inside the row. I think I can handle that part though. ;)

 

by: dtreadway7Posted on 2008-03-17 at 13:43:13ID: 21145933

I suppose that picture I just put in would have made things a lot easier up to this point.

 

by: HonorGodPosted on 2008-03-17 at 13:46:41ID: 21145968

oh yeah...  Much better.

So, the "Form Here" is another table.  Right?

What is the area to the right of "Form Here", and below the "buttons"?

Also, where you have "Ctieria" you really mean "Criteria", right?

 

by: dtreadway7Posted on 2008-03-17 at 13:50:30ID: 21145994

haha, ya. As for the additional table, could we not just put a div in cell 1? and then append the form to it? Rather than a whole nother table? You the master, I just askin.

 

by: HonorGodPosted on 2008-03-17 at 13:52:34ID: 21146011

Yes, that's fine.  It wasn't clear though from the previous descriptions.

It doesn't even have to be a div, it could be a table cell (i.e., "<td>")

 

by: HonorGodPosted on 2008-03-17 at 13:53:26ID: 21146025

I have some errands to do.  Once I get back to my computer, I'll take a look at this.

 

by: dtreadway7Posted on 2008-03-17 at 13:53:37ID: 21146026

I see I drew the form area as another row...it could all be in one row, or as an additional row that gets collapsed by the first one. ..doesnt matter really, for functionality sake that is. The space under the buttons is nothing, if that form is another row then its an empty cell I guess but I would prolly make the row colSpan all the way across, if we go with the "Additional collapsible row" vs. "DIV/form in the same row".

 

by: dtreadway7Posted on 2008-03-17 at 14:10:29ID: 21146182

Ok, here is exactly what I am saying.

Now, could the form exist in the dotted area? Then we collapse the DIV in each row instead of the row itself. Thats what I been trying to say. We create a div (per row) and append a child element -(form)- into it.

So, in essence, we create a single cell in the new row and, in that we put the <form> and table controls (+/ah/d):

<tr><td vAlign="top" hAliign="right">
<button><button><button>
<div style="float:left" id="this.childNode - or ("childDiv" +rowNum)>
<form>AppendedChild of parent div</form>
</div>
</td>
</tr>

Like that?

 

by: dtreadway7Posted on 2008-03-17 at 14:11:32ID: 21146190

Like this?

 

by: dtreadway7Posted on 2008-03-17 at 17:17:19ID: 21147546

Hey "HonorGod" I did a little more work in the direction of my last post. Here is what I have. Maybe you could  tell me if this is better.

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
	// add row for window content
	// a single cell the same width as the title bar row
	//dTR = this.dTable.insertRow(1);
	//dTD = dTR.insertCell(0);
	//dTD.colSpan = 3;
	//dTD.appendChild(dContent);
	
	//this.dTogTD = dTR.insertCell(1);
	//this.dTogTD.innerHTML = "-";
	//this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	//this.dTogTD.DTWindow = this;
	
	//this.dTD = dTR.insertCell(2);
	//this.dTD.DTWindow = this;	
	//this.dTD.innerHTML = "<div>^</div>";
		
	//this.dDelTD = dTR.insertCell(3);
	//this.dDelTD.innerHTML = "X";
	//this.dDelTD.onmousedown = DTWindow.prototype.onClose;
	//this.dDelTD.DTWindow = this;
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		
		// CONFIG: requires classes named classy0 and classy1
		row.className = 'classy' + (iteration % 2);
	
		// CONFIG: This whole section can be configured
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
		// cell 0 - text
		var cell0 = addRow.insertCell(0);
		cell0.appendChild(mainDiv);
		
		 
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute('height', 30);
		      
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute('height', 30);
		      
		var DivContent = document.createElement('div');
		       DivContent.setAttribute('height', 120);
		      
		
		
		var textNode = document.createTextNode(iteration);
		DivContent.appendChild(textNode);
		
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
		DivRowName.appendChild(txtInp);
		
		//var cell4 = row.insertCell(4);
		//var raEl;
		
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {addCurrentRow(this)};
		DivCtrls.appendChild(cbEl);
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		DivCtrls.appendChild(raEl);
		
		// cell 2 - input button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		DivCtrls.appendChild(btnEl);
		
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    DivRowName.appendChild(divTr);
		
		divForm.onclick = function () {addCurrentRow(this)};
		DivContent.appendChild(raEl);
		
		
	
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, DivContent, textNode, txtInp, cbEl, raEl, divForm);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-17 at 17:18:20ID: 21147549

Basically I created a single cell and placed some new divs in it:

 

by: dtreadway7Posted on 2008-03-17 at 20:03:29ID: 21148109

I;m getting closer HonorGod:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.divLeft
{
 podition:relative;
 float:left;
}
.divCtrls
{
 podition:relative;
 float:left;
 clear:right;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
	// add row for window content
	// a single cell the same width as the title bar row
	//dTR = this.dTable.insertRow(1);
	//dTD = dTR.insertCell(0);
	//dTD.colSpan = 3;
	//dTD.appendChild(dContent);
	
	//this.dTogTD = dTR.insertCell(1);
	//this.dTogTD.innerHTML = "-";
	//this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	//this.dTogTD.DTWindow = this;
	
	//this.dTD = dTR.insertCell(2);
	//this.dTD.DTWindow = this;	
	//this.dTD.innerHTML = "<div>^</div>";
		
	//this.dDelTD = dTR.insertCell(3);
	//this.dDelTD.innerHTML = "X";
	//this.dDelTD.onmousedown = DTWindow.prototype.onClose;
	//this.dDelTD.DTWindow = this;
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		
		// CONFIG: requires classes named classy0 and classy1
		row.className = 'classy' + (iteration % 2);
	
		// CONFIG: This whole section can be configured
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
		// cell 0 - text
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		
		cell0.appendChild(mainDiv);
	
		
		 
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute('height', 30);
		       DivRowName.className = 'divLeft';
					
		var DivCtrls = document.createElement('div');
					 DivCtrls.setAttribute('width', 120);
		       DivCtrls.setAttribute('height', 30);
		       DivCtrls.className = 'divCtrls';
					
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute('width', 300);
		       DivContent.setAttribute('height', 120);
		      
		
		
		var textNode = document.createTextNode(iteration);
		DivContent.appendChild(textNode);
		
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
 
		
		//var cell4 = row.insertCell(4);
		//var raEl;
		
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {addCurrentRow(this)};
		DivCtrls.appendChild(cbEl);
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		DivCtrls.appendChild(raEl);
		
		// cell 2 - input button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		DivCtrls.appendChild(btnEl);
		
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm.appendChild(divTr);
		DivRowName.appendChild(divForm);
		
		
		divForm.onclick = function () {addCurrentRow(this)};
		DivContent.appendChild(raEl);
		
		
	
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, textNode);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-18 at 03:45:53ID: 21149642

Sorry for the delayed response.  I had some family challenges that kept me off the computer last night... (sigh).

Looking

 

by: dtreadway7Posted on 2008-03-18 at 04:05:15ID: 21149700

Hey, no worries. I hope all went well with the family. Family first. :)

 

by: HonorGodPosted on 2008-03-18 at 04:28:08ID: 21149829

Well, if we use this kind of nested table (see code), it gives us this kind of look (see image).

Is this what you want?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Template</title>
<style>
  .DTWindowTitleStyle {
    font-weight: bold;
    fond-size: 14px;
    background-color: lime;
    cursor: default;
  }
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<table width='40%' border='1'>
 <tr class='DTWindowTitleStyle'>
   <td>A</td>
   <td width='80%'>&nbsp;</td>
   <td>X</td>
 </tr>
 <tr>
   <td>3</td>
   <td valign='top'>
     <input type='text'   value='3'>
     <table align='right'>
       <tr><td><input type='button' value='-'></td></tr>
       <tr><td><input type='button' value='D'></td></tr>
       <tr><td><input type='button' value='A'></td></tr>
     </table>
   </td>
   <td>
   </td>
 </tr>
 <tr>
   <td>4</td>
   <td valign='top'>
     <input type='text'   value='4'>
     <table align='right'>
       <tr><td><input type='button' value='-'></td></tr>
       <tr><td><input type='button' value='D'></td></tr>
       <tr><td><input type='button' value='A'></td></tr>
     </table>
   </td>
   <td>
   </td>
 </tr>
 <tr class='DTWindowTitleStyle'>
   <td colspan='3'>Add Another Criteria</td>
 </tr>
</table>
</body>
</html>

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 04:49:19ID: 21149948

hmmm, I guess we could do that. Seems like a lot of overhead though. And if I add functionality to search through the tables at some point, get to the form elements, etc. the hash will be awfully big. Do you agree? I think one cell, with all the trimmins would be a little lighter. But, hey, you are the Expert. I can always change the table structure later.

Those damn rowIndexes and current rows...thats where this gets confusing for me. I feel like I am right there though. Little light bulbs goin off everywhere now. "This" keyword...very nasty and powerful. :)

 

by: dtreadway7Posted on 2008-03-18 at 04:51:19ID: 21149961

As the structure is now, we have easy access to (this.parentNode.childNode(getElementById())) which holds all other pieces. Seems like easy control.

 

by: dtreadway7Posted on 2008-03-18 at 04:54:51ID: 21149982

I could go ahead and slap some (setAttribute("id", "commonNames") on those divs if you want. Anything to get us closer to the meat and potatoes. Though I see the importance of structure now. These tables really get the visual cortex creating table structures in the mind. Gotta keep that 3D model fresh and clear you know?

 

by: HonorGodPosted on 2008-03-18 at 04:55:39ID: 21149988

If you have a unique id attribute, then you really don't need anything other than:

document.getElementById()

to locate it.

 

by: HonorGodPosted on 2008-03-18 at 04:58:53ID: 21150008

My reasoning behind using a nested table was to get as close to the image you had above as possible.  Unfortunately, I have lots to learn about CSS, so there may be some nice (and hopefully easy) way of using CSS instead of tables.  However I haven't been able to find anything in the CSS books that I have that answers this question for me. :-(

 

by: dtreadway7Posted on 2008-03-18 at 04:59:16ID: 21150014

Plus, I think having the security of "your very own expert", helps to relax the process a little and think outside the box. This is the first time I have collaborated with someone like that online. Very cool. Seems like anything can be accomplished with 2 great minds. You are the Sempi and I am the student. hahah sorry. :)  

 

by: dtreadway7Posted on 2008-03-18 at 05:01:20ID: 21150028

Oh, no worries on CSS. I am a master at that. We can do anything. In fact I already found it a little challenging that my assigned class to the <div ctrls> to "clear:right" didn't already push our content div down to the bottom. I can work on that right now.

 

by: dtreadway7Posted on 2008-03-18 at 05:04:13ID: 21150041

On the unique attribute post: It will only be unique to a parent that contains it. It won't be unique to the document itself. I think using the parentNode.childNode(getElemenById()) would allow us to call similar document objects in the context of the parent holding them right? Maybe I'm wrong...I don't know that for sure but I am seeing evidence of it elsewhere too.

 

by: HonorGodPosted on 2008-03-18 at 05:07:25ID: 21150057

Why not make it unique to the page?
That shouldn't be all that difficult.

 

by: dtreadway7Posted on 2008-03-18 at 05:21:24ID: 21150152

Here is the correct cell layout now. I created some CSS and found some pieces that were not right. I was calling "raEl" (AKA Delete button) twice and appending after into the last form as well. Also had mistyped my CSS. Corrected that And created some new ones for all the row/div components.

I added another form for the rowName and set that content form with a border. They all layin out now...chillin in the sun. Where I want to be. :)

 

by: dtreadway7Posted on 2008-03-18 at 05:21:47ID: 21150155

Here is the code...duh.

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 
 float:left;
 width:250px;
 height:30px;
 
}
.divCtrls
{
 
 width:150px;
 height:30px;
 float:left;
 clear:right;
}
.divContent
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
	// add row for window content
	// a single cell the same width as the title bar row
	//dTR = this.dTable.insertRow(1);
	//dTD = dTR.insertCell(0);
	//dTD.colSpan = 3;
	//dTD.appendChild(dContent);
	
	//this.dTogTD = dTR.insertCell(1);
	//this.dTogTD.innerHTML = "-";
	//this.dTogTD.onmousedown = DTWindow.prototype.onRowMin;
	//this.dTogTD.DTWindow = this;
	
	//this.dTD = dTR.insertCell(2);
	//this.dTD.DTWindow = this;	
	//this.dTD.innerHTML = "<div>^</div>";
		
	//this.dDelTD = dTR.insertCell(3);
	//this.dDelTD.innerHTML = "X";
	//this.dDelTD.onmousedown = DTWindow.prototype.onClose;
	//this.dDelTD.DTWindow = this;
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		
		// CONFIG: requires classes named classy0 and classy1
		row.className = 'classy' + (iteration % 2);
	
		// CONFIG: This whole section can be configured
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.className = 'mainDiv';
		// cell 0 - text
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		cell0.appendChild(mainDiv);
	
		
		 
		var DivRowName = document.createElement('div');
		       DivRowName.className = 'divRowName';
					
		var DivCtrls = document.createElement('div');
		       DivCtrls.className = 'divCtrls';
					
		var DivContent = document.createElement('div');
		 			 DivContent.className = 'divContent';
					 
		      
		
		
		//var textNode = document.createTextNode(iteration);
		//DivContent.appendChild(textNode);
		
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
 
		
		//var cell4 = row.insertCell(4);
		//var raEl;
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '40');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {addCurrentRow(this)};
		DivCtrls.appendChild(cbEl);
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		DivCtrls.appendChild(raEl);
		
		// cell 2 - input button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		DivCtrls.appendChild(btnEl);
		
		var divForm = document.createElement('form2');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); // iteration included for debug purposes
    divForm.appendChild(divTr);
		DivContent.appendChild(divForm);
		
		
		
		
		
	
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode;
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 05:24:27ID: 21150174

Make it Unique to the page how? Name +Iterator? I mean the user can create as many tables of these as they want. If they create another table and our controls are set to a (document.getElementById()) there is gonna be some blowback and the fucntions will short circuit after the first matching name in the document. Maybe you tryin to say something else though. Whats your big picture.

 

by: dtreadway7Posted on 2008-03-18 at 05:33:23ID: 21150234

I see now to, how I c an easily generate those drop-downs into my second form element. I can use "iterator" now too add unique form "ID" to each of my forms. Damn, that gonna be a lot of forms possibly. Sweet though...new stuff to learn on returning that giant heap.

 

 

by: dtreadway7Posted on 2008-03-18 at 05:34:27ID: 21150236

You get to do this all day? Cool job. No wonder you a master!

 

by: dtreadway7Posted on 2008-03-18 at 05:39:44ID: 21150288

So we got a working TD - Table-less layout. Let's get crackin on those row controls. I see my Delete function is now failing. Which you wanna start with? Delete? AddRowInPlace? Toggle?

 

by: dtreadway7Posted on 2008-03-18 at 05:57:03ID: 21150441

Ok, so "Delete" not workin because we change the nesting inside the row now. It as referencing the parent table as:

function deleteCurrentRow(obj)
{

            var delRow = obj.parentNode.parentNode;  <--Obviously this target is wrong now
            var tbl = delRow.parentNode.parentNode;  <--can't use pN.pN.pN either
            var rIndex = delRow.sectionRowIndex;
            var rowArray = new Array(delRow);
            deleteRows(rowArray);
            reorderRows(tbl, rIndex);
      
}

How we gonna fix that? look for getElembyTag != "TR"?

 

by: dtreadway7Posted on 2008-03-18 at 06:08:12ID: 21150542

Ok, I created an ID for each div and the table. I set an alert in the Delete function to tell us what "obj.parentNode.parentNode" is pointing at. It is pointing at the "mainDiv".

So, our structure is:
<tr>
<td>
    <mainDiv>
        <rowNameDiv></div>
        <ctrlsDiv></div>
        <contentDiv></div>
     </div>
</td>
</tr>

and I think Delete is tryin to find (the Table)

 

by: dtreadway7Posted on 2008-03-18 at 06:08:45ID: 21150549

Here the code:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 
 float:left;
 width:250px;
 height:30px;
 
}
.divCtrls
{
 
 width:150px;
 height:30px;
 float:left;
 clear:right;
}
.divContent
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContent';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '40');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode;
		alert(delRow.ID);
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 06:18:31ID: 21150618

Ok, HG, I found it. Delete went home and couldnt find his Papa this time. So I found papa for him. Delete working fine now. Here is the working target.

function deleteCurrentRow(obj)
{

            var delRow = obj.parentNode.parentNode.parentNode.parentNode;
            //alert(delRow.ID);
            var tbl = delRow.parentNode.parentNode;
            var rIndex = delRow.sectionRowIndex;
            var rowArray = new Array(delRow);
            deleteRows(rowArray);
            reorderRows(tbl, rIndex);
      
}

New code with working delete function:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 
 float:left;
 width:250px;
 height:30px;
 
}
.divCtrls
{
 
 width:150px;
 height:30px;
 float:left;
 clear:right;
}
.divContent
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
 
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContent';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '40');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode.parentNode.parentNode;
		//alert(delRow.ID);
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 06:19:54ID: 21150634

U still there? HG? I'm gettin into the hard stuff now. Gonna need ya. for the AddRowHere and definitely for the toggle.

 

by: HonorGodPosted on 2008-03-18 at 06:34:59ID: 21150749

wow, I walk away for a little bit (to take the kids to school), and you make a slew of changes. :-)

Let me take a look at what you have done.

 

by: dtreadway7Posted on 2008-03-18 at 06:39:49ID: 21150782

HAHAHA, I'm on Fire!! well I was. Here is the latest. My attempt at (toggle) fucntion. Take a look at (hideRow(obj)), works ok in IE accept that each row targets the first id and none of the other rows hide themselves and, not in FF at all.

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 
 float:left;
 width:250px;
 height:30px;
 
}
.divCtrls
{
 
 width:150px;
 height:30px;
 float:left;
 clear:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
  clear:both;
	display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '40');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
function addCurrentRow(num)
{
 
   		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
 
    var addRow = num.parentNode.parentNode;
		var tbl = addRow.parentNode;
		var rIndex = addRow.sectionRowIndex;
		var rowArray = new Array(addRow);
 
 
			var iteration = num + ROW_BASE;
		
 
		
      var row = tbl.insertRow(num);
		
		
		var cell0 = addRow.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cell0.appendChild(textNode);
		
		// cell 1 - input text
		var cell1 = addRow.insertCell(1);
		var txtInp = document.createElement('input');
		txtInp.setAttribute('type', 'text');
		txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
		txtInp.setAttribute('size', '40');
		txtInp.setAttribute('value', iteration); // iteration included for debug purposes
		cell1.appendChild(txtInp);
		
		// cell 2 - input button
		var cell2 = addRow.insertCell(2);
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('value', 'Delete');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		cell2.appendChild(btnEl);
		
		// cell 3 - input checkbox
		var cell3 = addRow.insertCell(3);
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'checkbox');
		cell3.appendChild(cbEl);
		
		// cell 4 - input radio
		var cell4 = addRow.insertCell(4);
		var raEl;
		
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('value', 'AddRow');
		raEl.onclick = function () {addCurrentRow(this)};
		cell4.appendChild(raEl);
		
		
		
		// Pass in the elements you want to reference later
		// Store the myRow object in each row
		row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
		
		insertRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function hideRow(obj)
{
 
		var hideRowID = obj.parentNode.parentNode.document.getElementsByTagName("DIV").item(3)
		if(hideRowID.style.display != 'none'){
		    hideRowID.style.display = 'none';
		} else {		
       hideRowID.style.display = '';	
		}	
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode.parentNode.parentNode;
		//alert(delRow.ID);
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 06:41:18ID: 21150794

I also realize out cell layout is a little arye in FF, I will fix that in a min.

 

by: dtreadway7Posted on 2008-03-18 at 06:43:45ID: 21150822

This is in my (hideRow()) function as the pointer to the contentDiv:

hideRowID = obj.parentNode.parentNode.document.getElementsByTagName("DIV").item(3)

Lemme guess, won't work in FF? and is prolly finding the (table.tr.td.mainDiv.item(3)..period. Not looking in each row for it. Finds it from the table once. Am I catching on?

 

by: dtreadway7Posted on 2008-03-18 at 06:45:41ID: 21150849

You can take the wheel now. I am starting to feel abstract. :)

 

by: dtreadway7Posted on 2008-03-18 at 06:47:35ID: 21150863

Yep, throwin in the  (...parentNode. -->document<--getELement...) messing it up. Need to go relative target. How we do that? Look for children and siblings?

 

by: dtreadway7Posted on 2008-03-18 at 06:48:36ID: 21150875

I am out of my "ElementById" hahah, sorry. :)

 

by: HonorGodPosted on 2008-03-18 at 07:03:23ID: 21151042

ok. Interesting changes.

I started by looking at your deleteCurrentRow(), and would like to suggest that you make your code more general (i.e., less specific).  For example, when I see code like:

var delRow   = obj.parentNode.parentNode.parentNode.parentNode;

This is very specific to the environment.  This only works when the object passed to this routine (i.e., "obj", or deleteCurrentRow( this ) ) actually refers to a button within a cell within a row.
If we use something like this, it is generally reusable:

This allows the assignment to be:

var delRow = thisRow( obj );

It also allows some code to be include to check for an unexpected situation (e.g., if the
document element passed to this routine (obj) is not contained within a TR) by:

if ( delRow ) {
  // Process the containing TR element
} else {
  alert( 'Error: specified element is not within a table row' );
}

  //------------------------------------------------------------------
  // Name: thisRow()
  // Role: Look up the hierarchy to locate the containing TR element
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns null;
  //------------------------------------------------------------------
  function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 07:08:44ID: 21151099

Very nice. I new it was something slick like that. 5 lines...damnit. Sweet. Ok, continue...I am all eyes.

 

by: dtreadway7Posted on 2008-03-18 at 07:11:10ID: 21151125

We gonna reuse that or make it a private function of the "delete"?

 

by: dtreadway7Posted on 2008-03-18 at 07:11:57ID: 21151133

Actually, that was stupid, course we gonna reuse that. Gonna need it again on Toggle and Add here...duh

 

by: HonorGodPosted on 2008-03-18 at 07:14:49ID: 21151158

yup...

Now, the next question is, given a row as shown above:

http://www.experts-exchange.com/Q_23242618.html#a21146190

What do you want to have it look like after the "ah" button is clicked?

 

by: HonorGodPosted on 2008-03-18 at 07:17:22ID: 21151195

also, what do you want to show when the +/- button is clicked?

If you completely hide the row, how do you want to be able to show it?

 

by: dtreadway7Posted on 2008-03-18 at 07:20:19ID: 21151233

In the image reference you lnked to, just now. Ther is another collapsed riw underneath it. That is waht the row will look like when the (toggle +) is clicked.

 

by: dtreadway7Posted on 2008-03-18 at 07:21:16ID: 21151245

Oh, "AH"... I want to add another row just above the one where "AH" is clicked. Sorry

 

by: HonorGodPosted on 2008-03-18 at 07:26:14ID: 21151313

no, that's fine.  I just want to understand the difference between clicking on the AH, vs what we see when you click on the "Add Another Criteria" row.

It sounds like the difference is the placement of where the row will be added.  When you have no  data row, you must click on the "Add Another Criteria" footer to add the first row.

When you click on an AH button should the row be added after the current row, or before?
I presume that you want it after.

 

by: dtreadway7Posted on 2008-03-18 at 07:31:14ID: 21151370

Um....before would be fine. Actually, I am going to call the (AddRow) function just after the firstTable is created. That way the user will have a TR already in view. The "AH" will allow the user to put a row in place.... the relationship between the rows will be <tr>"AND"<tr>"AND"<tr>... to the DB that is. So it is important for the user to be able to either 1.) Create a row in place OR 2.) Move the rows up or down. I think creating in place is a little easier and user friendly. Both could be nice as well but I don't wanna get greedy with your help. Thanks again. :)

 

by: dtreadway7Posted on 2008-03-18 at 07:41:04ID: 21151506

Imagine that the peoeple using this will be creating like 5 rows at a time...then configuring the row data. The ability to move the rows might be a little better than having to delete a configured row and recreate it in the right spot. I guess my current design doesnt have much flex room if they create a row out of place. Hmmm. Well, lets just keep going. I bet I can manage moving the rows... and reordering them in specific heirarchy after a move is not paramount either... I don't think. We should never be able to sort these rows really so I think we are safe.

 

by: HonorGodPosted on 2008-03-18 at 08:09:31ID: 21151849

Notes:
- AddRow() is only called by onAddRow, which is not passing any value.
- In order to use insertRow(), we must be able to specify the position at which the new row
  is to be added.
  - So, in order to add a new row after the current row, we really need to be able to
    determine the current row number.  One way to do this is:

- Locate the containing table,
- iterate over the rows in the table, looking for the current row in question
- For example, we might be able to use something like:

- alright, so let's change the "thisRow()" to be "thisNode()" so we can find various containing element.
- we can then create a rowNum() routine to use this to determine the row # of the row containing the ah button we pressed:
- I also changed the references to "num" within the addCurrentRow() routine to be to "obj", so that the object passed is more accurately reference.

Please note that row numbers start at 0, so the rowNum() returned will be from 0..N (where N is the number of rows in the table).

  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
  function addCurrentRow( obj )
  {
    
    if (obj == null) {
      obj = nextRow;
    } else {
      alert( 'rowNum: ' + rowNum( obj ) );
      iteration = obj + ROW_BASE;
    }
 
    var addRow = obj.parentNode.parentNode;
    var tbl = addRow.parentNode;
    var rIndex = addRow.sectionRowIndex;
    var rowArray = new Array(addRow);
 
    var iteration = obj + ROW_BASE;
 
    var row = tbl.insertRow(obj);
 
    var cell0 = addRow.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cell0.appendChild(textNode);
 
    // cell 1 - input text
    var cell1 = addRow.insertCell(1);
    var txtInp = document.createElement('input');
    txtInp.setAttribute('type', 'text');
    txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    txtInp.setAttribute('size', '40');
    txtInp.setAttribute('value', iteration); // iteration included for debug purposes
    cell1.appendChild(txtInp);
 
    // cell 2 - input button
    var cell2 = addRow.insertCell(2);
    var btnEl = document.createElement('input');
    btnEl.setAttribute('type', 'button');
    btnEl.setAttribute('value', 'Delete');
    btnEl.onclick = function () {deleteCurrentRow(this)};
    cell2.appendChild(btnEl);
 
    // cell 3 - input checkbox
    var cell3 = addRow.insertCell(3);
    var cbEl = document.createElement('input');
    cbEl.setAttribute('type', 'checkbox');
    cell3.appendChild(cbEl);
 
    // cell 4 - input radio
    var cell4 = addRow.insertCell(4);
    var raEl;
 
    var raEl = document.createElement('input');
    raEl.setAttribute('type', 'button');
    raEl.setAttribute('value', 'AddRow');
    raEl.onclick = function () {addCurrentRow(this)};
    cell4.appendChild(raEl);
 
    // Pass in the elements you want to reference later
    // Store the myRow object in each row
    row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
 
    insertRows(rowArray);
    reorderRows(tbl, rIndex);
  }
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-18 at 08:13:09ID: 21151893

Given this, we can then make use of the fact that we have a valid row number.
In order to insert a row before the current row number, however, we need to
decrement the value returned.

However, we need to be careful to check for an "error" condition.  If the object
passed to the rowNum() routine is not within a table, the row number that gets
returned will be -1.  This was chosen to match the value specified to insertRow().
If it is passed a -1, then a new row is created at the end of the table.

Does this help, and make sense?

 

by: dtreadway7Posted on 2008-03-18 at 08:14:01ID: 21151905

Nice, and your absolutely right. BTW, I fixed that table structure for both IE and FF. Here my new code:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
border:0;
background-color:transparent;
}
.divCtrls
{
 
 height:30px;
 float:right;
 
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
  clear:both;
	display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
  function addCurrentRow( obj )
  {
    
    if (obj == null) {
      obj = nextRow;
    } else {
      alert( 'rowNum: ' + rowNum( obj ) );
      iteration = obj + ROW_BASE;
    }
 
    var addRow = obj.parentNode.parentNode;
    var tbl = addRow.parentNode;
    var rIndex = addRow.sectionRowIndex;
    var rowArray = new Array(addRow);
 
    var iteration = obj + ROW_BASE;
 
    var row = tbl.insertRow(obj);
 
    var cell0 = addRow.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cell0.appendChild(textNode);
 
    // cell 1 - input text
    var cell1 = addRow.insertCell(1);
    var txtInp = document.createElement('input');
    txtInp.setAttribute('type', 'text');
    txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    txtInp.setAttribute('size', '40');
    txtInp.setAttribute('value', iteration); // iteration included for debug purposes
    cell1.appendChild(txtInp);
 
    // cell 2 - input button
    var cell2 = addRow.insertCell(2);
    var btnEl = document.createElement('input');
    btnEl.setAttribute('type', 'button');
    btnEl.setAttribute('value', 'Delete');
    btnEl.onclick = function () {deleteCurrentRow(this)};
    cell2.appendChild(btnEl);
 
    // cell 3 - input checkbox
    var cell3 = addRow.insertCell(3);
    var cbEl = document.createElement('input');
    cbEl.setAttribute('type', 'checkbox');
    cell3.appendChild(cbEl);
 
    // cell 4 - input radio
    var cell4 = addRow.insertCell(4);
    var raEl;
 
    var raEl = document.createElement('input');
    raEl.setAttribute('type', 'button');
    raEl.setAttribute('value', 'AddRow');
    raEl.onclick = function () {addCurrentRow(this)};
    cell4.appendChild(raEl);
 
    // Pass in the elements you want to reference later
    // Store the myRow object in each row
    row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl);
 
    insertRows(rowArray);
    reorderRows(tbl, rIndex);
  }
 
 
 
function hideRow(obj)
{
 
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode.parentNode.parentNode;
		//alert(delRow.ID);
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 08:14:30ID: 21151911

I see the alser(rowNumber) now too. Sweet

 

by: dtreadway7Posted on 2008-03-18 at 08:22:23ID: 21152010

Well, I got your code in place... seems like it is creating the new row now, (copied the original addRowCode into "AH") but, it keeps creating the row above the first row. I modified (obj -1) but still comes in early. hmmm

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
border:0;
background-color:transparent;
}
.divCtrls
{
 
 height:30px;
 float:right;
 
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
  clear:both;
	display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
  function addCurrentRow( obj )
  {
    
    if (obj == null) {
      obj = nextRow;
    } else {
      alert( 'rowNum: ' + rowNum( obj ) );
      iteration = obj + ROW_BASE;
    }
 
    var addRow = obj.parentNode.parentNode.parentNode.parentNode;
    var tbl = addRow.parentNode;
    var rIndex = addRow.sectionRowIndex;
    var rowArray = new Array(addRow);
 
    var iteration = obj + ROW_BASE;
 
    	// add the row
		var row = tbl.insertRow(obj -1 );
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
    insertRows(rowArray);
    reorderRows(tbl, rIndex);
  }
 
 
 
function hideRow(obj)
{
 
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = obj.parentNode.parentNode.parentNode.parentNode;
		//alert(delRow.ID);
		var tbl = delRow.parentNode.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 08:29:54ID: 21152086

Man, that's some fancy codin there HG. I like it:

function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
  function addCurrentRow( obj )
  {
   
    if (obj == null) {
      obj = nextRow;
    } else {
      //alert( 'rowNum: ' + rowNum( obj ) );
      iteration = obj + ROW_BASE;
    }

 

by: dtreadway7Posted on 2008-03-18 at 08:31:51ID: 21152109

"thisNode", where that badBOy was hidin at? Prolly in plain view...as always. :)

 

by: dtreadway7Posted on 2008-03-18 at 08:34:13ID: 21152138

You get points just for showing me that that obj/node reference!

 

by: HonorGodPosted on 2008-03-18 at 08:39:15ID: 21152194

ok, I see what you are talking about.

One moment please. :-)

 

by: dtreadway7Posted on 2008-03-18 at 08:43:59ID: 21152253

I got all your pieces in though:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
border:0;
background-color:transparent;
}
.divCtrls
{
 
 height:30px;
 float:right;
 
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
  clear:both;
	display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 
 
	
DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; // text object
	this.two = two; // input text object
	this.three = three; // input checkbox object
	this.four = four; // input radio object
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
 
  function addCurrentRow( obj )
  {
    if (obj == null) {
      obj = nextRow;
    } else {
      //alert( 'rowNum: ' + rowNum( obj ) );
      iteration = obj + ROW_BASE;
    }
 
    var addRow = thisRow( obj );
    var tbl = addRow.parentNode;
    var rIndex = addRow.sectionRowIndex;
    var rowArray = new Array(addRow);
 
    var iteration = obj + ROW_BASE;
 
    	// add the row
		var row = tbl.insertRow(obj -1 );
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
        	cell0.setAttribute("vAlign", "top");
        	//Append the mainDiv to the cell
        	cell0.appendChild(mainDiv);
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
    insertRows(rowArray);
    reorderRows(tbl, rIndex);
  }
 
 
 
function hideRow(obj)
{
 
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = thisRow( obj );
		//alert(delRow.ID);
		var tbl = delRow.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:
512:
513:
514:
515:
516:
517:
518:
519:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 08:53:45ID: 21152378

HG, all this brain workout making me hungry. How bout a little lunch break. I be back in 30. I would order you a pizza but the pizza place don't know where you live. I just tellem..."It's HG, everybody know HG." Hahha, see u in a few.

 

by: HonorGodPosted on 2008-03-18 at 09:15:01ID: 21152625

alright. I see some problems... :-(

in addCurrentRow(), you have some confusing code.
Rewrite the beginning, I now have it looking like:

This is where things start to get a bit messy.

You begin by creating a new div, which is fine.

    // Create a main parent div ito go in a single row cell
    var mainDiv = document.createElement( 'div' );
    mainDiv.setAttribute( 'height', 160 );
    mainDiv.setAttribute( 'ID', 'mainDiv' );
    mainDiv.className = 'mainDiv';


Then, you create the first (zeroth) cell for the new row:

    // Create a single cell to go in the row that will hold all the divs
    var cell0 = row.insertCell( 0 );
    cell0.setAttribute( "vAlign", "top" );


which is like the following HTML:

  <tr>
    <td valign='top'></td>
  </tr>

Then, you put the reference to the new cell into the div.

    cell0.appendChild( mainDiv );

This is not good.  How is this sequence supposed to be represented?
Is the newly created cell to be removed from the row to which it was
just added?  Or, are we really supposed to have two references to the
same cell element?

I'm still reading the code in an attempt to understand what, exactly,
you are trying to do.

  //------------------------------------------------------------------
  // Name: addCurrentRow()
  // Role: insert a new row into the table before the implied row
  // Note: The object provided should refer to some element within a
  //       row in the table.  The row containing the referenced item
  //       is the reference row.  The row to be added will be inserted
  //       before the reference row.
  //------------------------------------------------------------------
  function addCurrentRow( obj )
  {
 
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
    }
    row.className = 'classy' + ( num % 2 );
 
    ...

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 09:18:10ID: 21152671

You mean why the container Cell? I guess we don't have to have it. You thinking- just put the content, rowname, and cntrls in the cell itself...get rid of "mainDiv"?

 

by: dtreadway7Posted on 2008-03-18 at 09:19:33ID: 21152685

The "classy" thing, was an alternating row class, I don't need it anymore.

 

by: HonorGodPosted on 2008-03-18 at 09:30:49ID: 21152834

What would the HTML look like?

<tr>
    <td valign='top'>
      <div id='mainDiv' class='mainDiv'>
        <div id='RowName' class='divRowName'>
        </div>
        <div id='DivCtrls' class='divCtrls'>
          <input type='button' ...>
          <input type='button' ...>
          <input type='button' ...>
        </div>
        <div id='DivContent' class='divContentOn'>
          <form id='Form2' methoc='POST' action='#'>
            <input type='text' name=?? size='40' value='Content #'>
          </form>
        </div>
      </div>
    </td>
</tr>

 

by: dtreadway7Posted on 2008-03-18 at 09:31:19ID: 21152839

So, here is the code again, I removed some things... this a little better? Also, I see what the function was doing for add row here. You were trying to determine if it was the first row, then don't put at position -1. But this is ok because, technically I am going have the tabel appear with a row in it. Therefore it will correctly with a starting row. So, we good there.

I think we are good on the:
addRowHere. = good
Delete is good =good
toggle = not good yet.

here is the modified code. This seems a little better:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
	font-weight: bold;
	fond-size: 14px;
	background-color: lime;
	cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
border:0;
background-color:transparent;
}
.divCtrls
{
 
 height:30px;
 float:right;
 
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
  clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
  clear:both;
	display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
	
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
		// add the row
		var row = tbl.insertRow(num -1);
		row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
		cell0.setAttribute("vAlign", "top");
		//Append the mainDiv to the cell
		cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content" + iteration); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
	}
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 function addCurrentRow( obj )
  {
 
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
    }
 
		//row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
        	cell0.setAttribute("vAlign", "top");
        	//Append the mainDiv to the cell
        	cell0.appendChild(mainDiv);
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName"); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
  }
 
 
 
function hideRow(obj)
{
 
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
function deleteCurrentRow(obj)
{
 
		var delRow = thisRow( obj );
		//alert(delRow.ID);
		var tbl = delRow.parentNode;
		var rIndex = delRow.sectionRowIndex;
		var rowArray = new Array(delRow);
		deleteRows(rowArray);
		reorderRows(tbl, rIndex);
	
}
 
function deleteRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
		
	}
}
 
function insertRows(rowObjArray)
{
 
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
		
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:
509:
510:
511:
512:
513:
514:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-18 at 09:33:14ID: 21152868

how was the pizza?  


Anyway, regarding the mainDiv, I agree that it would appear to be an unnecessary tag.
Additionally, those div's that really don't need to be references (located via getElementById)
really don't need an id attribute.  This would simplify the code a bit.

 

by: dtreadway7Posted on 2008-03-18 at 09:35:06ID: 21152889

And yes, that structure should be it. I think I created a second form element for the rowName that I am putting the rowName input into. But thats not necessary. I also name d the rowName form "form2" even though it is the 1st form. So, they backwards.

 

by: HonorGodPosted on 2008-03-18 at 09:35:53ID: 21152899

As far as the toggle is concerned, I can't tell you what to do with that until you answer the question posed above:

http://www.experts-exchange.com/Q_23242618.html#a21151195

 

by: dtreadway7Posted on 2008-03-18 at 09:37:09ID: 21152921

True on the IDs...I only added them so I could pass (parentNode.ID) to get an accurate mapping of the target. We dont need the IDs on all that stuff.

Meatloaf was good. Not like moms though. :)

 

by: dtreadway7Posted on 2008-03-18 at 09:40:12ID: 21152963

Ok, I don't want to hide the ROW on toggle. I want to hide the content div. That would still leave the row showing the buttons and the rowName. I thought we could grab the button.parentNode.childnodes.item(3) (the content div) and set his (style.display) or (className='') to hide him. Run the toggle on the (if{}else{}).

 

by: dtreadway7Posted on 2008-03-18 at 09:40:55ID: 21152972

Make sense?

 

by: HonorGodPosted on 2008-03-18 at 09:41:57ID: 21152987

One thing that I would like to point out is how complicated code can be to create things like table rows.  Especially when they contain a non-trivial amount of elements (e.g., some # of cells, with input fields, and checkboxes, and buttons, and forms, etc.).

You might want to consider creating a "hidden" table that contains 1 row just as you would like it to be created.  Then, you can use the cloneNode() method to duplicate this reference row.  Then, you can change the particular elements in question (e.g., attributes) that need to be unique for this actual row.

Then, all you have to do is insert this newly created row duplicate into the table at the appropriate place.

 

by: HonorGodPosted on 2008-03-18 at 09:51:09ID: 21153098

Oh, if all you want to do is hide the containing div, then you need to:

- locate the div in question
- change the "style" attribute to display='none'

Given that we have a button in the "particular row" in question, how do we find the "appropriate" contained div?

- We could use one of the following techniques:
- Have an id that identifies this div within a row (not unique within the document)
  Unfortunately, this is considered a "bad practice" since id attributes are supposed to be
  unique to the document
- Have a name attribute for this div within the row.  This is acceptable, since name attributes
  do not have to be unique within the document.
- We could "hard code" the relative location of the div within the TR (this is not a good idea, since it doesn't allow us to change the row contents easily, or reuse the code)
- or we could traverse the DOM hierarchy, looking for something of note, e.g., the div with a particular className

What do you think?

 

by: dtreadway7Posted on 2008-03-18 at 09:52:23ID: 21153114

Well, I think that is great but, the new row/form if cloned will clone the users current work in the row being cloned too...right? When the user creates a new row the form should be empty. If we can do it like that and have a starting (empty form object) then great lets do it. I understand what your saying though. Show me the way....i am close to grasping your reasoning i think.

 

by: dtreadway7Posted on 2008-03-18 at 09:55:13ID: 21153145

Sounds like you want o get rid of that lengthy duplication of AddRow code, and insert an easier object to reference and hide. Right?

 

by: dtreadway7Posted on 2008-03-18 at 09:58:59ID: 21153173

Maybe we get a new award for longest running Thread this year? I mean, personally I think this thread would be quite useful tutorial to those in search of the DynTable Creation Answers and how-to's. As well as how not to ask a question.  :)

 

by: HonorGodPosted on 2008-03-18 at 10:04:18ID: 21153227

Well, the "lengthy duplication of AddRow code" is certainly not a "best practice".
It is also confusing, and error prone.  Other than that, it is fine.  :-)  (Well, maybe
not "fine", perhaps "adequate").

Anyway, you get to choose.  What make the most sense to you.  Please remember
though.  It's your code, and if it doesn't make sense to you now, think how hard
it will be to change, fix, or reuse it 6 months from now.

 

by: dtreadway7Posted on 2008-03-18 at 10:04:18ID: 21153228

Given that we have a button in the "particular row" in question, how do we find the "appropriate" contained div?

- We could use one of the following techniques:
- Have an id that identifies this div within a row (not unique within the document)
  Unfortunately, this is considered a "bad practice" since id attributes are supposed to be
  unique to the document
- Have a name attribute for this div within the row.  This is acceptable, since name attributes
  do not have to be unique within the document.
- We could "hard code" the relative location of the div within the TR (this is not a good idea, since it doesn't allow us to change the row contents easily, or reuse the code)
- or we could traverse the DOM hierarchy, looking for something of note, e.g., the div with a particular className

What do you think?

Option3:
- Have a name attribute for this div within the row.  This is acceptable, since name attributes
  do not have to be unique within the document.

 

by: HonorGodPosted on 2008-03-18 at 10:08:06ID: 21153294

Another option, instead of using cloneNode() would be to have the actual HTML stored in a string, then you could easily use something like the following to populate the row contents:

row.innerHTML = newRowString;

 

by: HonorGodPosted on 2008-03-18 at 10:10:27ID: 21153319

ok, what should the row HTML look like?

How close is this?


<tr>
    <td valign='top'>
      <div id='mainDiv' class='mainDiv'>
        <div id='RowName' class='divRowName'>
        </div>
        <div id='DivCtrls' class='divCtrls'>
          <input type='button' ...>
          <input type='button' ...>
          <input type='button' ...>
        </div>
        <div id='DivContent' class='divContentOn'>
          <form id='Form2' methoc='POST' action='#'>
            <input type='text' name=?? size='40' value='Content #'>
          </form>
        </div>
      </div>
    </td>
</tr>

 

by: dtreadway7Posted on 2008-03-18 at 10:10:39ID: 21153326

-Ya, no DOM walker.
-Relative, as you said is structure dependent, div could re-nest or move.

-Name seems good to me, even though IE will refence it as :"ID" if we using getElementByName but thats ok with me.

Simple, sweet, and fairly stable if structure changes.

 

by: dtreadway7Posted on 2008-03-18 at 10:13:23ID: 21153369

Another option, instead of using cloneNode() would be to have the actual HTML stored in a string, then you could easily use something like the following to populate the row contents:

row.innerHTML = newRowString;

GOOD. GOOD. Lets do this. and your row structure is good. yes

 

by: HonorGodPosted on 2008-03-18 at 10:27:54ID: 21153540

slight revision.  You mentioned earlier that the outer (i.e., 'mainDiv'), so let's be real specific about how the HTML should look.  When that is done, we can create the correct newRowString, and we should be all set.

How does this look to you?

<tr>
  <td valign='top'>
    <div id='RowName' class='divRowName'>
      <form id='Form1' methoc='POST' action='#'>
        <input type='text' name='inputName#' size='35' value='Content #'>
      </form>
    </div>
    <div id='DivCtrls' class='divCtrls'>
      <input type='button' id='ToggleRow' value='+/-' onclick='hideRow(this);'>
      <input type='button' id='AddRowH'   value='ah'  onclick='addCurrentRow(this);'>
      <input type='button' id='Delete'    value='D'   onclick='deleteCurrentRow(this);'>
    </div>
    <div id='DivContent' class='divContentOn'>
      <form id='Form2' methoc='POST' action='#'>
        <input type='text' name='inputName#' size='35' value='Content #'>
      </form>
    </div>
  </td>
</tr>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 10:34:14ID: 21153610

That's fine. It does not have "mainDiv in the structure but I think you trying to cut-the-fat, in which case "mainDiv" is stick of butter. So, that structure looks right.

 

by: dtreadway7Posted on 2008-03-18 at 10:35:03ID: 21153622

Now you just place everything in the cell(0) directly...no extra parent div (mainDiv)? yes?

 

by: HonorGodPosted on 2008-03-18 at 10:36:35ID: 21153647

Consider, if you will, what happens if we add the following code to the beginning of addCurrentRow():


    var temp = document.getElementById( 'template' );
    if ( temp ) {
      alert( temp.innerHTML );
    }


and the following html to the bottom of the file:

See what happens when you click on an ah button...

<div style='display:none'>
<table border='1'>
<tr id='template'>
  <td valign='top'>
    <div id='RowName' class='divRowName'>
      <form id='Form1' methoc='POST' action='#'>
        <input type='text' name='inputName#' size='35' value='Content #'>
      </form>
    </div>
    <div id='DivCtrls' class='divCtrls'>
      <input type='button' id='ToggleRow' value='+/-' onclick='hideRow(this);'>
      <input type='button' id='AddRowH'   value='ah'  onclick='addCurrentRow(this);'>
      <input type='button' id='Delete'    value='D'   onclick='deleteCurrentRow(this);'>
    </div>
    <div id='DivContent' class='divContentOn'>
      <form id='Form2' methoc='POST' action='#'>
        <input type='text' name='inputName#' size='35' value='Content #'>
      </form>
    </div>
  </td>
</tr>
</table>
</div>

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-18 at 10:38:31ID: 21153670

To answer your most recent question, yes.

However, to be more specific, you probably want to retrieve the innerHTML text from the reference (hidden) table, massage the contents to change the "inputName#" and "Content #' text to be specific to the row being added, and then save this in the row.innerHTML of the newly created row.

How does that sound?

 

by: dtreadway7Posted on 2008-03-18 at 10:42:53ID: 21153738

Your singin my song HG, your singin my song. :)

 

by: dtreadway7Posted on 2008-03-18 at 10:45:49ID: 21153777

var temp = document.getElementById( 'template' );
    if ( temp ) {
      alert( temp.innerHTML );
    }

So you wanna create a template div element to be cloned. We use the doc.getElemBID reference to fetch from a common place each time? I got no problem with that.

 

by: dtreadway7Posted on 2008-03-18 at 10:52:51ID: 21153853

And in "massaging" the content...wen the row is deleted and the subsequent rows reordered..would we not just pass rowNum as the unique "ID" + rownum? that way of we change the row the unique ID stays the same as the row num. Or did I just confuse myself? :)

 

by: dtreadway7Posted on 2008-03-18 at 10:54:15ID: 21153874

Actually, at the time of render the unique number becomes static doesnt it. Guess that last post wouldnt work then.

 

by: dtreadway7Posted on 2008-03-18 at 10:56:03ID: 21153898

Oh, you were saying unique ID to that ROW, but common to the DOC. Ok

 

by: dtreadway7Posted on 2008-03-18 at 10:58:46ID: 21153929

HG, just imagine a cat with a robot mouse stuck to his tail. Thats my brain. And I got a short tail too. :)

 

by: HonorGodPosted on 2008-03-18 at 11:18:29ID: 21154145

Ah to answer your questions:

Q: So you wanna create a template div element to be cloned. We use the doc.getElemBID reference to fetch from a common place each time?
A: Correct.

Q: And in "massaging" the content...wen the row is deleted and the subsequent rows reordered..would we not just pass rowNum as the unique "ID" + rownum?
A: Well, since you are taking about reordering the rows, the "row number" that would be retrieved by the rowNum() routine is a relative row number as it currently exists in the table.
The row number to which you are referring would be a unique, never changing identification of a row number as it was created.  Otherwise, we would have to massage the row number information in each row after any table manipulation (e.g., row creation, deletion, or reordering).
This would be difficult, and non-productive.  In my opinion, it would be better to have some other name of this concept (other than row number) that can be generated when a row is created, and is never changed thereafter.  Then, regardless of the position of this row in the table, the attribute will continue to have this unique value.  Hopefully this makes sense.

Q: at the time of render the unique number becomes static doesnt it
A: Well, this is certainly one way to do it.  For example, we could have a global variable that contains a "last used value".  When we need to create a new row, we simply increment this global value, and use in to create unique id attributes for the row elements.

 

by: dtreadway7Posted on 2008-03-18 at 11:29:11ID: 21154247

Q: at the time of render the unique number becomes static doesnt it
A: Well, this is certainly one way to do it.  For example, we could have a global variable that contains a "last used value".  When we need to create a new row, we simply increment this global value, and use in to create unique id attributes for the row elements.

AND:True true, like the previous rows NUM. Since after reorder it gets a new value, we get reference one and +1 to our current rows IDs. That would guarantee that we are naming current row correctly. Would require a slight modifcation to the :

 function thisRowsPreviousSibling( obj ) {
  }

Man, we are outside the box now aren't we? Personally, at this point you probably have bertter instincts than mine. You choose. As long as each new tables rows, doesnt get hung on a previous tables IDs, Im A-ok with it.

 

by: dtreadway7Posted on 2008-03-18 at 11:32:56ID: 21154300

"Self Contained Dynamic JS Tables"

 That's what we should name this thread.  :)
 
Break it into, (table structure), (node identification), (row tracking), (row content control)

 

by: dtreadway7Posted on 2008-03-18 at 11:38:12ID: 21154350

Whats scary is I see a ton of bad ways to do this table, and I was doing all of them I think. When we started. I can't imagine what my code would have looked like... wait, yes I can. Thats what scary.

 

by: HonorGodPosted on 2008-03-18 at 11:47:39ID: 21154421

I think that you saw my gentle nudge.

What we need is some mechanism to generate a unique value to be used to identify table elements (rows, cells, contents, etc).

These unique id attributes could then be used to quickly, and easily locate associated elements that make use of the same unique value.  For example, when we create a new row, get generate a new "unique" suffix that will be appended to each of the element values that we will need to reference.  For example, ones that come to mind include:

- tr
- input
- div
- form

In our template row (see http://www.experts-exchange.com/Q_23242618.html#a21153647),
we can refer to this suffix by some special notation (e.g., '<#>' or something).
Then, once we retrieve the innerHTML as a string, we only need to use the string replace call (http://www.w3schools.com/jsref/jsref_replace.asp) to quickly and easily create our new row contents.

So, the code to add a new row would become almost trivial:

- locate template TR text

  var temp = document.getElementById( 'template' );
  if ( temp ) {
    var nextRowText = temp.innerHTML;
  } else {
    alert( 'Sever error - required row template not found.' );
  }

- generate a new unique value
- change the template string to replace the "special text" with the new unique value
- determine where the row should be placed (e.g., rowNum)
  var row = insertRow( rowNum );
- Assign the row contents using:
  row.innerHTML = nextRowText;

sounds easy, doesn't it?

 

by: dtreadway7Posted on 2008-03-18 at 11:58:28ID: 21154539

If I am thinking of this correctly, it is quite elegant and would reduce the lines of code tremendously. You got me peaked HG... let's see this point winner! I am right there with you. :)

 

by: HonorGodPosted on 2008-03-18 at 12:19:19ID: 21154736

Close, but not quite.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript' src='drillDowns.js'/></script>
<style>
  .DTWindowTitleStyle
  {
    font-weight: bold;
    fond-size: 14px;
    background-color: lime;
    cursor: default;
  }
    
  .mainDiv
  {
   width:300px;
   position:relative;
   padding:0px;
   margin:0px;
  }
    
  .divRowName
  {
   float:left;
   width:100px;
   height:30px;
  }
    
  .divRowName input
  {
  border:0;
  background-color:transparent;
  }
 
  .divCtrls
  {
 
   height:30px;
   float:right;
  }
 
  .divContentOn
  {
   position:relative;
   border:1px #333 solid;
    clear:both;
  }
    
  .divContentOff
  {
   position:relative;
   border:1px #333 solid;
    clear:both;
    display:none;
  }
</style>
<script type='text/javascript'>
// The magic
function objText(d)
{
  var s = new Array();
  s.push('{<br>');
  for ( var i in d )
  s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
  s.push('}');
  return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName';
var ROW_BASE = 1;
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
  // save arguments
  this.title = title;
 
  // create table for window with title-bar and content
  this.dTable = document.createElement("table");
  this.dTable.setAttribute('ID', 'ImThePapa');
  this.dTable.border = 1;
 
  // set the position of the window
  this.dTable.style.position = "relative";
  this.dTable.style.backgroundColor = "white";
 
  // link from the table to the DTWindow object
  this.dTable.DTWindow = this;
 
  // append to document body
  document.body.appendChild(this.dTable);
 
 
  // add row for title bar
  var dTR = this.dTable.insertRow(0);
  dTR.className = "DTWindowTitleStyle";
 
  // title
  var dTD = dTR.insertCell(0);
  dTD.innerHTML = title;
  dTD.DTWindow = this;
 
  // minimize
  this.dMinTD = dTR.insertCell(1);
  //this.dMinTD.innerHTML = "_";
  this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
  //this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
  this.dMinTD.DTWindow = this;
 
  // close
  this.dTD = dTR.insertCell(2);
  this.dTD.innerHTML = "X";
  this.dTD.DTWindow = this;
  this.dTD.onmousedown = DTWindow.prototype.onClose;
 
 
  var dTR2 = this.dTable.insertRow(-1);
  dTR2.className = "DTWindowTitleStyle";
 
  // footer
  var dTD2 = dTR2.insertCell(0);
  dTD2.innerHTML = "Add Another Ctieria Set";
  dTD2.DTWindow = this;
  dTD2.setAttribute("colSpan", 3);
  dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
}
 
 
 
 
DTWindow.prototype.onAddRow = function()
{
  this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
  if (hasLoaded) {
    var tbl = this.dTable;
    var nextRow = tbl.rows.length;
    var iteration = nextRow + ROW_BASE;
    if (num == null) {
      num = nextRow;
    } else {
      iteration = num + ROW_BASE;
    }
 
    // add the row
    var row = tbl.insertRow(num -1);
    row.className = 'classy' + (iteration % 2);
 
    //Create a main parent div ito go in a single row cell
    var mainDiv = document.createElement('div');
           mainDiv.setAttribute('height', 160);
           mainDiv.setAttribute('ID', 'mainDiv');
           mainDiv.className = 'mainDiv';
 
    //Create a single cell to go in the row that will hold all the divs
    var cell0 = row.insertCell(0);
    cell0.setAttribute("vAlign", "top");
    //Append the mainDiv to the cell
    cell0.appendChild(mainDiv);
 
 
     //Create a Div for the rowName and assign a class to float left
    var DivRowName = document.createElement('div');
           DivRowName.setAttribute("ID", "RowName");
           DivRowName.className = 'divRowName';
 
  //Create a div for the RowButtons (delete) (+/-) (addRowHere)
    var DivCtrls = document.createElement('div');
           DivCtrls.setAttribute("ID", "DivCtrls");
           DivCtrls.className = 'divCtrls';
 
    //Create a div for the Content  Div and assign CSS to place on bottom
    var DivContent = document.createElement('div');
           DivContent.setAttribute("ID", "DivContent");
           DivContent.className = 'divContentOn';
 
    //Append our divs to the Main Parent Div
    mainDiv.appendChild(DivRowName);
    mainDiv.appendChild(DivCtrls);
    mainDiv.appendChild(DivContent);
 
    //create a Form for our rowName
    var divForm2 = document.createElement('form');
    divForm2.setAttribute('method', 'post');
    divForm2.setAttribute('ID', 'Form1');
    divForm2.setAttribute('action', '#');
    //var divTr = document.createElement('input');
        var divTr2 = document.createElement('input');
        divTr2.setAttribute('type', 'text');
        divTr2.setAttribute('name', INPUT_NAME_PREFIX + iteration);
        divTr2.setAttribute('size', '35');
        divTr2.setAttribute('value', "RowName" + iteration); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
    DivRowName.appendChild(divForm2);
 
    //create a button for our Toggle Content Ctrl
    var cbEl = document.createElement('input');
    cbEl.setAttribute('type', 'button');
    cbEl.setAttribute('ID', 'ToggleRow');
    cbEl.setAttribute('value', '+/-');
    cbEl.onclick = function () {hideRow(this)};
    //Append the button to the DivCtrls Div
    DivCtrls.appendChild(cbEl);
 
    //create a button for our add Row In Place ctrl
    var raEl = document.createElement('input');
    raEl.setAttribute('type', 'button');
    raEl.setAttribute('ID', 'AddRowH');
    raEl.setAttribute('value', 'ah');
    raEl.onclick = function () {addCurrentRow(this)};
    //Append the button to the DivCtrls Div
    DivCtrls.appendChild(raEl);
 
    //create a button for our delete button
    var btnEl = document.createElement('input');
    btnEl.setAttribute('type', 'button');
    btnEl.setAttribute('ID', 'Delete');
    btnEl.setAttribute('value', 'D');
    btnEl.onclick = function () {deleteCurrentRow(this)};
    //append the button to the DvCtrls Div
    DivCtrls.appendChild(btnEl);
 
    //Create second form for the contentDiv
    var divForm = document.createElement('form');
    divForm.setAttribute('method', 'post');
    divForm.setAttribute('ID', 'Form2');
    divForm.setAttribute('action', '#');
    //put a place holder  input
        var divTr = document.createElement('input');
        divTr.setAttribute('type', 'text');
        divTr.setAttribute('name', INPUT_NAME_PREFIX + iteration);
        divTr.setAttribute('size', '40');
        divTr.setAttribute('value', "Content" + iteration);
    //Append the input to form
    divForm.appendChild(divTr);
    //Append the form  to the content div
    DivContent.appendChild(divForm);
 
 
    // Store the myRow object in each row (Call them in order!!)
    row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
  }
}
 
DTWindow.prototype.close = function()
{
  // remove from browser document
  this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
  this.DTWindow.close();
}
 
function myRowObject(one, two, three, four)
{
  this.one = one; // text object
  this.two = two; // input text object
  this.three = three; // input checkbox object
  this.four = four; // input radio object
}
 
  //------------------------------------------------------------------
  // Name: nextSuffix()
  // Role: Generate a unique (monotonically increasing) suffix number
  //------------------------------------------------------------------
  var suffixNum = 0;
  function nextSuffix() {
    return suffixNum++;
  }
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return -1;
  }
 
  //------------------------------------------------------------------
  // Name: addCurrentRow()
  // Role: insert a new row into the table before the implied row
  // Note: The object provided should refer to some element within a
  //       row in the table.  The row containing the referenced item
  //       is the reference row.  The row to be added will be inserted
  //       before the reference row.
  //------------------------------------------------------------------
  function addCurrentRow( obj )
  {
 
    //----------------------------------------------------------------
    // Locate and retrieve the template TR contents
    //----------------------------------------------------------------
    var temp = document.getElementById( 'template' );
    if ( temp ) {
//    alert( temp.innerHTML );
    } else {
      alert( 'Severe errro - required template element not found.' );
      return
    }
    //----------------------------------------------------------------
    // Change the text contents to generate text unique for this row
    //----------------------------------------------------------------
    var text = temp.innerHTML.replace( /###/g, '' + nextSuffix() );
    
    //----------------------------------------------------------------
    // Locate the insertion point in the table for the new row.
    //----------------------------------------------------------------
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row => end of table
      var num = rowNum( row );              // Reference row number
      alert( 'obj == null  rowNum: ' + num );
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj );                // Reference row number
//      alert( 'rowNum: ' + num );
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
    }
    
    //----------------------------------------------------------------
    // Add the row contents...
    //----------------------------------------------------------------
    row.innerHTML = text;
  }
 
 
 
function hideRow(obj)
{
 
    var hideRowID = obj.parentNode.parentNode.childNodes(2);
 
      if(hideRowID.className != 'contentDivOn'){
        hideRowID.className = 'contentDivOn';
    } else {
       hideRowID.className = 'contentDivOff';
    }
 
    //alert(hideRowID.ID);
}
 
 
function deleteCurrentRow(obj)
{
 
    var delRow = obj.parentNode.parentNode.parentNode.parentNode;
    //alert(delRow.ID);
    var tbl = delRow.parentNode.parentNode;
    var rIndex = delRow.sectionRowIndex;
    var rowArray = new Array(delRow);
    deleteRows(rowArray);
    reorderRows(tbl, rIndex);
 
}
 
function deleteRows(rowObjArray)
{
 
    for (var i=0; i<rowObjArray.length; i++) {
      var rIndex = rowObjArray[i].sectionRowIndex;
      rowObjArray[i].parentNode.deleteRow(rIndex);
 
  }
}
 
function insertRows(rowObjArray)
{
 
    for (var i=0; i<rowObjArray.length; i++) {
      var rIndex = rowObjArray[i].sectionRowIndex;
      rowObjArray[i].parentNode.insertRow(rIndex);
 
  }
}
 
function reorderRows(tbl, startingIndex)
{
    if (tbl.rows[startingIndex]) {
      var count = startingIndex + ROW_BASE +1;
      for (var i=startingIndex; i<tbl.rows.length; i++) {
      count++;
    }
  }
}
 
 
 
function createDWindow()
{
  var dDiv = document.createElement("div");
  dDiv.style.width = "350px";
  dDiv.style.height = "80px";
  new DTWindow(document.getElementById('wName').value);
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
 
<div style='display:none'>
<table border='1'>
<tr id='template'>
  <td valign='top'>
    <div id='RowName###' class='divRowName'>
      <form id='Form1###' method='POST' action=''>
        <input type='text' name='inputName###' size='35' value='Content ###'>
      </form>
    </div>
    <div id='DivCtrls###' class='divCtrls'>
      <input type='button' value='+/-' onclick='hideRow(this);'>
      <input type='button' value='ah'  onclick='addCurrentRow(this);'>
      <input type='button' value='D'   onclick='deleteCurrentRow(this);'>
    </div>
    <div id='DivContent###' class='divContentOn'>
      <form id='Form2###' method='POST' action=''>
        <input type='text' name='inputName###' size='40' value='Content ###'>
      </form>
    </div>
  </td>
</tr>
</table>
</div>
 
</body>
</html>

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-18 at 12:27:50ID: 21154828

You are going to like this revised deleteCurrentRow()

  //------------------------------------------------------------------
  // Name: deleteCurrentRow()
  // Role: remove the row containing the specified object
  // Note: The object provided should refer to some element within a
  //       row in the table.  The row containing the referenced item
  //       is the row to be removed from the containing table.
  //------------------------------------------------------------------
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-18 at 12:41:34ID: 21154984

Oh ya, that is nasty. Much nicer. :)


 

 

by: dtreadway7Posted on 2008-03-18 at 12:47:15ID: 21155033

You go HG! I see it coming togeather. I see the area that is runTiming as well.

tbl. not inscope I dont think in that add function, the first time you call it. At least I can't find it in a global before this line:

 var row = tbl.insertRow( -1 );  

I could be wrong though. And, just a Q... would innerHTML not take the place of ".replace()"? I have used that before and it always seems to automatically replace the content it is callled into. I might be doin it wrong though.

 

by: dtreadway7Posted on 2008-03-18 at 12:48:48ID: 21155047

I am working it too....hoping I fond something to impress you with. You on the advanced level right above me though. Im learning a LOT!!!

 

by: dtreadway7Posted on 2008-03-18 at 13:03:51ID: 21155174

Oh I see. You gonna try find the all the ### and replace them. Hmmm....ok. I think I got my brain around it. Let me take a little break (getting off work now). I will be back on after my daily life duties are completed. Gussy (best pug in the universe) needs to go out and get some "squeaky mouse" time. He the only one that howls for me when I come home at EOD.

Then dinner with the Girlfriend. Thank you for sticking with me on this. This some advanced stuff for me and no one here to help. Thanks HG...see you in a little while.

 

by: HonorGodPosted on 2008-03-18 at 13:31:54ID: 21155469

I'm banging my head on an apparent IE "feature".. specifically:

http://www.thescripts.com/forum/thread149479.html

i.e., IE doesn't like insertRow()  :-(

So, I'm trying to figure how how best to work through this.

btw, we too have a pug.  Unfortunately, the pug gets to sleep closer to my bride than I do... :-)

 

by: HonorGodPosted on 2008-03-18 at 14:03:11ID: 21155817

One of the things through which I am currently working is the difference between how the code works (fails) on FireFox & IE.  I'm getting different behavior on each, and it is somewhat annoying.

 

by: dtreadway7Posted on 2008-03-18 at 18:54:46ID: 21157869

You know Im wondering if we couldnt take a little different approach. I mean we are trying to make the addCurrentRow a public function. What if:

-we take the (INPUT_NAME_PREFIX + iteration) out of our table elements, I mean if we remove the private function dependencies we could just create all the row elements outside of the function as a global set of elements, Wrap them up in easily appendable object and call maybe a special case of (addRow())

(if(this.button.id=="ah") add current row)) } else {if(button.id=="addAnother") add a normal row. We then grab our appendable (row object with cells and divs) and slap it in place.

What you think? We still remove that extra code, we track rows easier and we get to use (this.dTable) as our table reference.

Just trying to think of other possible good work arounds. We would alleviate the (insertRow) problem you are having with IE/NN too.

Maybe?

 

by: dtreadway7Posted on 2008-03-18 at 18:57:30ID: 21157878

We keep addRow and addCurrentRow as the same function. All we gotta is separate the content we are appending to <tr>....or dang, it may not even matter. Might could leave them where they are...hmmm

 

by: HonorGodPosted on 2008-03-19 at 04:48:55ID: 21160427

maybe...  That is the direction that I have been trying to go.

 

by: dtreadway7Posted on 2008-03-19 at 04:54:51ID: 21160467

Found this little guy on the net:

http://www.quirksmode.org/dom/domform.html

Look at the way they append. Works in IE and NN too.

 

by: dtreadway7Posted on 2008-03-19 at 04:57:26ID: 21160486

var insertHere = document.getElementById('writeroot');
      insertHere.parentNode.insertBefore(newFields,insertHere);

insertBefore()? on the row? But we insert the innherHTML of a row object to the table? Im stretching.

 

by: dtreadway7Posted on 2008-03-19 at 05:00:08ID: 21160508

tbl.appendChild(row);
tbl.insertBefore(row,lastrow);

 

by: dtreadway7Posted on 2008-03-19 at 05:02:53ID: 21160537

function swapRows(a, b){
var bP = b.parentNode;
var bS = b.nextSibling;
a.parentNode.insertBefore(b, a.nextSibling);
bP.insertBefore(a, bS);

Can't we make sure the row object we are inserting is actually present before insert?

 

by: dtreadway7Posted on 2008-03-19 at 05:04:59ID: 21160555

BTW, Good morning.

 

by: dtreadway7Posted on 2008-03-19 at 05:12:24ID: 21160608

Hey, what if we had a hidden row at the top of the table, or bottom. One always in the same position, maybe with an ID on it. We set it to display:none; It is the template that we clone and insertBefore. Would that work?

 

by: dtreadway7Posted on 2008-03-19 at 05:13:33ID: 21160616

Since insertBefore() requires that the object be there ahead of time...it would be.

 

by: dtreadway7Posted on 2008-03-19 at 05:24:03ID: 21160703

A variation of this maybe?

var newTR= tbl.row(0).cloneNode(true);
      newTR.id = '';
      newTR.style.display = 'block'; <-- because it would have been and set to none to begin with
      var newTRs = newTR.childNodes;
      for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name
            if (theName)
                  newTRs[i].name = theName + counter;
      }
      var insertHere = this.row;
      insertHere.parentNode.insertBefore(newTR,insertHere);

 

by: dtreadway7Posted on 2008-03-19 at 05:40:20ID: 21160828

function addRowClone(obj)
{
  var tbl = this.dTable.tBodies[0];
  var newNode = tbl.rows[0].cloneNode(true);     //<-- Row 0 would be our hidden empty row.
         newNode.style.display = "block";
  tbl.appendChild(newNode);
}

Everything inside already would be cloned so we got our empty form elements too. We need to

 

by: dtreadway7Posted on 2008-03-19 at 05:51:28ID: 21160918

ok, here is the table with a blank (display:none) row in position "insertRow(1)", now we could just clone and insertBefore() right?

 

by: dtreadway7Posted on 2008-03-19 at 05:56:43ID: 21160956

haha, it works!! Kind of...I don t have much control over where I append the row at this second but...code:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
	 var cbEl = document.createElement('input');
        	cbEl.setAttribute('type', 'button');
        	cbEl.setAttribute('ID', 'ToggleRow');
        	cbEl.setAttribute('value', '+/-');
        	cbEl.onclick = function () {hideRow(this)};
        	//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
      		raEl.setAttribute('type', 'button');
      		raEl.setAttribute('ID', 'AddRowH');
      		raEl.setAttribute('value', 'ah');
      		raEl.onclick = function () {addCurrentRow(this)};
      		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
	if (hasLoaded) {
		var tbl = this.dTable;
		var nextRow = tbl.rows.length;
		var iteration = nextRow + ROW_BASE;
		if (num == null) { 
			num = nextRow;
		} else {
			iteration = num + ROW_BASE;
		}
		
 
  var tbl = this.dTable.tBodies[0];
  var newNode = tbl.rows[1].cloneNode(true);     //<-- Row 0 would be our hidden empty row.
         newNode.style.display = "block";
         tbl.appendChild(newNode);
 
		
	}
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 function addCurrentRow( obj )
 {
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
 }
 
		//row.className = 'classy' + (iteration % 2);
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = row.insertCell(0);
        	cell0.setAttribute("vAlign", "top");
        	//Append the mainDiv to the cell
        	cell0.appendChild(mainDiv);
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		//var divTr = document.createElement('input');
    		var divTr2 = document.createElement('input');
    		divTr2.setAttribute('type', 'text');
    		divTr2.setAttribute('name', INPUT_NAME_PREFIX);
    		divTr2.setAttribute('size', '35');
    		divTr2.setAttribute('value', "RowName"); // iteration included for debug purposes
    divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
		var cbEl = document.createElement('input');
		cbEl.setAttribute('type', 'button');
		cbEl.setAttribute('ID', 'ToggleRow');
		cbEl.setAttribute('value', '+/-');
		cbEl.onclick = function () {hideRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
		raEl.setAttribute('type', 'button');
		raEl.setAttribute('ID', 'AddRowH');
		raEl.setAttribute('value', 'ah');
		raEl.onclick = function () {addCurrentRow(this)};
		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
		btnEl.setAttribute('type', 'button');
		btnEl.setAttribute('ID', 'Delete');
		btnEl.setAttribute('value', 'D');
		btnEl.onclick = function () {deleteCurrentRow(this)};
		//append the button to the DvCtrls Div
		DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', INPUT_NAME_PREFIX);
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
		
 
		// Store the myRow object in each row (Call them in order!!)
		row.myRow = new myRowObject(mainDiv, DivRowName, DivCtrls, cbEl, raEl, btnEl, DivContent, divForm, divForm2);
  }
 
 
 
function hideRow(obj)
{
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
function deleteRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
	}
}
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:
489:
490:
491:
492:
493:
494:
495:
496:
497:
498:
499:
500:
501:
502:
503:
504:
505:
506:
507:
508:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 05:58:50ID: 21160972

If we can do that, then we can move insertCurrentRow() to a child level function of the table as well. Clone in place. Right? Come on HG! We close! :)

 

by: HonorGodPosted on 2008-03-19 at 05:59:40ID: 21160977

whew... Good morning to you too.

I hadn't reviewed the page of QuirksMode recently.  Thanks for the link.

The trouble that I'm currently having though is with FF.  It doesn't want to recognize the duplicated '+/-' and 'ah' buttons as real buttons.  They display fine, but just don't react
to 'onclick' (sigh).

reading...

 

by: dtreadway7Posted on 2008-03-19 at 06:21:59ID: 21161180

Exactly!!! Me too! I was just about to ask you that...take a look at this code:


<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
	 var cbEl = document.createElement('input');
        	cbEl.setAttribute('type', 'button');
        	cbEl.setAttribute('ID', 'ToggleRow');
        	cbEl.setAttribute('value', '+/-');
        	cbEl.onclick = function () {hideRow(this)};
        	//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
      		raEl.setAttribute('type', 'button');
      		raEl.setAttribute('ID', 'AddRowH');
      		raEl.setAttribute('value', 'ah');
      		raEl.onclick = function () {addCurrentRow(this)};
      		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('input');
				   btnEl.setAttribute('type', 'button');
					 btnEl.setAttribute('ID', 'Delete');
					 btnEl.setAttribute('value', 'D');
					 //btnEl.setAttribute('onClick', 'this.parentNode.parentNode.removeChild(this.parentNode)');
					 btnEl.onclick = function () {this.parentNode.removeChild(this.parentNode)};
					 //append the button to the DvCtrls Div
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
 
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      		   newTR.id = '';
      			 newTR.style.display = 'block'; 
      var newTRs = newTR.childNodes;
      for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name
             if (theName)
                  newTRs[i].name = theName + counter;
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
				 
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 function addCurrentRow( obj )
 {
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
 }
 
  }
 
 
 
function hideRow(obj)
{
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
function deleteRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
	}
}
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 06:23:07ID: 21161197

I just read something though, that says we can't clone the buttons...like radio buttons either. But, says we can innerHTML them and they should work fine.

 

by: dtreadway7Posted on 2008-03-19 at 06:24:41ID: 21161214

so clone mixed with innerHTMl for the buttons and form elements? hmmm.

 

by: HonorGodPosted on 2008-03-19 at 06:28:26ID: 21161256

You read that on QuirksMode?  Or elsewhere?

And for what versions of IE/FF does that apply?

 

by: HonorGodPosted on 2008-03-19 at 06:29:26ID: 21161263

or using createElement for the buttons?

 

by: dtreadway7Posted on 2008-03-19 at 06:33:36ID: 21161314

Um, lemme find it again...was talking about extending form elements and why radio buttons would not work when cloned. Then said the work around was to (innerHTML) the radio buttons and they work  just fine. Another said that certain form elements all had to have unique IDs too if cloned to work properly. Hold on let me find it...

 

by: dtreadway7Posted on 2008-03-19 at 06:35:14ID: 21161329

Yep , QM.

"Problems in Explorer

Unfortunately there are two serious problems in Explorer Windows:

First of all it sees all generated radio buttons as belonging to one single array, even if they have different names. Thus the user can select only one radio button in all generated fields. Basically this means that you cannot use radio buttons at all in generated forms.

A reader said that generating radio buttons through innerHTML works fine. If you must use radio buttons, you might try this approach.

Secondly the generated form fields are unreachable by a traditional document.forms call: Explorer simply doesn't enter them in the arrays. This can be worked around by giving the form field an ID and then using getElementById()."

 

by: dtreadway7Posted on 2008-03-19 at 06:37:52ID: 21161351

I know we are not on the same array struture as radios in the form but, still, works for radios why not ours? I gues fundamentally I dont understand the problem. Would an onClick.value not be a cloned property?

Lets see what IE shows on "View Rendered Source". Lemme check  

 

by: dtreadway7Posted on 2008-03-19 at 06:39:46ID: 21161373

hmmm, stupd IE7 standalone doesn't have "View Rendered Source". Well, lemme check something else then.

 

by: dtreadway7Posted on 2008-03-19 at 06:42:48ID: 21161398

Can we clone the events?

 

by: dtreadway7Posted on 2008-03-19 at 06:44:11ID: 21161413

By themselves I mean?

 

by: dtreadway7Posted on 2008-03-19 at 06:58:19ID: 21161561

Ahh, ya in quarks mode the actual remove button on their for is first created as a static button in a display:none table/form. They clone it from the static button and it preserves the button function. Cant clone a JS GENERATED button, but can clone static.

<div id="dltBttnTemp">
<input type="button" value="Delete"
            onclick="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode);" />

</div>

 

by: HonorGodPosted on 2008-03-19 at 06:58:49ID: 21161563

What do you mean "Can we clone events"?

 

by: dtreadway7Posted on 2008-03-19 at 07:09:44ID: 21161698

Ok got it check this out. I made a DIV.ID="buttonTemplate" with display none and set it in the page jsut above the create table button. In that is a button with a hardCoded onclick function. I call the button into the original form creation. I then clone it and the function works. You can clone as many times as you want too. Basically you just have to have the original source of the button come from static. My target for the delete function is wrong but the fucntion fires everytime!!

Code: 

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create a button for our Toggle Content Ctrl
	 var cbEl = document.createElement('input');
        	cbEl.setAttribute('type', 'button');
        	cbEl.setAttribute('ID', 'ToggleRow');
        	cbEl.setAttribute('value', '+/-');
        	cbEl.onclick = function () {hideRow(this)};
        	//Append the button to the DivCtrls Div
		DivCtrls.appendChild(cbEl);
		
		//create a button for our add Row In Place ctrl
		var raEl = document.createElement('input');
      		raEl.setAttribute('type', 'button');
      		raEl.setAttribute('ID', 'AddRowH');
      		raEl.setAttribute('value', 'ah');
      		raEl.onclick = function () {addCurrentRow(this)};
      		//Append the button to the DivCtrls Div
		DivCtrls.appendChild(raEl);
		
		//create a button for our delete button
		var btnEl = document.createElement('div');
				   
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 //btnEl.setAttribute('type', 'button');
					 //btnEl.setAttribute('ID', 'Delete');
					 //btnEl.setAttribute('value', 'D');
					 //btnEl.onclick = function () {this.parentNode.removeChild(this.parentNode)};
					 //btnEl.onclick = function () {deleteCurrentRow(this)};
					 //append the button to the DvCtrls Div
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = 'block'; 
      var newTRs = newTR.childNodes;
			
			//var deleteButton = newTR.childNodes.items(4);
			        //alert(deleteButton.id);
      
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
				 
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 function addCurrentRow( obj )
 {
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
 }
 
  }
 
 
 
function hideRow(obj)
{
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
function deleteRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
	}
}
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<div id="buttonTemplate" style="display:none;">
<input type="button" value="D" onclick="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 07:12:41ID: 21161740

I meant on the clone evt. could we take the function, turn it into obj.evt and place it into the button as a new onclick each time. Looks like it's unnec at this point though. Now that we can just access the parentNode strcuture from the static button, will we still need the (deleteRow()) function now?

 

by: dtreadway7Posted on 2008-03-19 at 07:19:55ID: 21161808

And, the answer is yes we will need the delete(), Cant target the table from the static button with (this.pN)...I can make the delete button disappear though. Maybe could toggle the content div possibly.

 

by: HonorGodPosted on 2008-03-19 at 07:31:49ID: 21161922

When I try that (most recent code), the buttons aren't rendered well

 

by: dtreadway7Posted on 2008-03-19 at 07:34:00ID: 21161941

Ok, got delete working, jsut passed in the "deleteCurrentRow(this);" Works like a champ.

 

by: dtreadway7Posted on 2008-03-19 at 07:35:08ID: 21161952

Ya, I noticed that. Its ok Im gonna sprinkle some CSS on them right now. :) Give me a sec.

 

by: HonorGodPosted on 2008-03-19 at 07:36:20ID: 21161964

By the way...

this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode);

Yuck!

 

by: HonorGodPosted on 2008-03-19 at 07:40:00ID: 21162009

Are you are trying to locate the enclosing TABLE, or TR?

 

by: dtreadway7Posted on 2008-03-19 at 07:41:33ID: 21162024

In fact no need to do just one button. I will right the innerHTML of <divCtrls> and have all 3 buttons come in togeather. Cleaned up some more code too!  :)

Code:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var btnEl = document.createElement('div');
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = 'block'; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
				 
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 function addCurrentRow( obj )
 {
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
 }
 
  }
 
 
 
function hideRow(obj)
{
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
function deleteRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
	}
}
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<div id="buttonTemplate" style="display:none;">
 
<input type="button" value="+/-" style="float:left;" onclick="" />
<input type="button" value="ah" style="float:left;" onclick="" />
<input type="button" value="D" style="float:left;" onclick="deleteCurrentRow(this);" />
 
</div>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 07:42:41ID: 21162035

Oh, i fixed that. Chec out that last code post. Does it right with your delete func.

 

by: dtreadway7Posted on 2008-03-19 at 07:46:11ID: 21162079

Sweet, you think you can modify addCurrentRow() to run on that same clone in curent position?

 

by: dtreadway7Posted on 2008-03-19 at 07:48:52ID: 21162112

Ouch, in NN, when we run delete it is not deleting everything. It is leaving something behind. The rows space doesnt collapse.

 

by: HonorGodPosted on 2008-03-19 at 07:52:02ID: 21162149

Unfortunately, creating a new criteria, then deleting it causes the table to look like:

 

by: dtreadway7Posted on 2008-03-19 at 07:52:05ID: 21162152

Nevermind, found the problem. Was setting the row style.display="block"...the block was staying. Changed it to (style.display="") and its fine now. Dang BLOCK!!! ahahah.

 

by: dtreadway7Posted on 2008-03-19 at 07:53:17ID: 21162163

Good delete now.

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var btnEl = document.createElement('div');
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 function addCurrentRow( obj )
 {
    if ( obj == null ) {
      var row = tbl.insertRow( -1 );        // Empty row at end of table
      var num = rowNum( row );              // Reference row number
    } else {
      var tbl = thisNode( obj, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        num = rowNum( obj ) - 1;            // Reference row number
        var row = tbl.insertRow( num );     // New (empty) row
      } else {
        alert( 'addCurrentRow(): Error- specified item is not within a table.' );
        return;
      }
 }
 
  }
 
 
 
function hideRow(obj)
{
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
function deleteRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
	}
}
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<div id="buttonTemplate" style="display:none;">
 
<input type="button" value="+/-" style="float:left;" onclick="" />
<input type="button" value="ah" style="float:left;" onclick="" />
<input type="button" value="D" style="float:left;" onclick="deleteCurrentRow(this);" />
 
</div>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 07:54:49ID: 21162179

Man, I feel like I just read and drank-in like 10 books on JS. :)

 

by: dtreadway7Posted on 2008-03-19 at 08:02:57ID: 21162264

Ok, I modified addCurrentRow. Its cloning and working but, its creating the clone at position(1) not in the current position. Take a look:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var btnEl = document.createElement('div');
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
function myRowObject(one, two, three, four)
{
	this.one = one; 
	this.two = two; 
	this.three = three; 
	this.four = four; 
}
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
 
 
 
 function addCurrentRow( obj )
 {
   var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
		var newTR= tbl.rows[1].cloneNode(true);
     			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
      
   } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
	
	
		
		
	
function hideRow(obj)
{
		var hideRowID = obj.parentNode.parentNode.childNodes(2);
		
			if(hideRowID.className != 'contentDivOn'){
		    hideRowID.className = 'contentDivOn';
		} else {		
       hideRowID.className = 'contentDivOff';	
		}	 	
	 	
		//alert(hideRowID.ID);
}
 
 
 
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
function deleteRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.deleteRow(rIndex);
	}
}
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<div id="buttonTemplate" style="display:none;">
 
<input type="button" value="+/-" style="float:left;" onclick="" />
<input type="button" value="ah" style="float:left;" onclick="addCurrentRow(this);" />
<input type="button" value="D" style="float:left;" onclick="deleteCurrentRow(this);" />
 
</div>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:

Select allOpen in new window

 

by: HonorGodPosted on 2008-03-19 at 08:04:57ID: 21162280

I find it especially annoying when changes work on one browser (e.g., FF) but not the other (IE).  :-(

 

by: dtreadway7Posted on 2008-03-19 at 08:12:39ID: 21162356

My last post? It should work in both. It workin in IE6, IE7, NN, Safari for me. Or, you just saying in general you hate it. If so, me too. Sometimes the "way to go" is not always clear. But through the contrast of "what not to do" we are shown the way.  Trial and fire = theWay.

 

by: dtreadway7Posted on 2008-03-19 at 08:15:11ID: 21162379

Also, I notice that once we clone the hidden row, every clone after that takes the place of (row[1]). The hidden row gets pushed to the bttom of the row index. This means that the new first row[1] is getting cloned with whatever was inside it cloned too. We need to always clone the hidden row. How we do that?

 

by: dtreadway7Posted on 2008-03-19 at 08:24:17ID: 21162461

Can you take at a look at this modified (deleteCurrentRow) function? I dont think it is puting the row exactly in the right place:

function addCurrentRow( obj )
 {
   var tbl = thisNode( obj, 'TABLE' );
	 var row = tbl.insertRow( -1 );  
   var num = rowNum( row );    
		
		if ( tbl ) {
		
		num = rowNum( obj ) - 1;  
		var newTR= tbl.rows[1].cloneNode(true);
     			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[num];
      insertHere.parentNode.insertBefore(newTR,insertHere);
      
   } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 08:26:23ID: 21162486

Whew!! Im feelin like a Dynamic JS guru with you around HG. :)

 

by: dtreadway7Posted on 2008-03-19 at 08:33:42ID: 21162558

I think it is putting it in the right place actually. addCurrentRow() might be ok.

 

by: dtreadway7Posted on 2008-03-19 at 08:46:29ID: 21162689

Ok, for our hideRow function, we gonna start like this?:

  function hideRow(obj)
  {
              var cDiv = thisNode( obj, 'DIV' );    

And then find <content div> from there? Or do I need to go all the way back to "tr" and find in childNodes()?

 

by: dtreadway7Posted on 2008-03-19 at 08:48:00ID: 21162699

HG, lunch Time! I be back in an hour. Thanks for sticking with me. See u again in few.

 

by: HonorGodPosted on 2008-03-19 at 09:27:34ID: 21163077

well, the "creating at position(1)" seems to be related to this code:

      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);

You are specifically telling it to insert before rows[ 1 ]...  which isn't where you want it to go.

 

by: HonorGodPosted on 2008-03-19 at 09:36:50ID: 21163172

The question posed here (http://www.experts-exchange.com/Q_23242618.html#a21162689)
is basically the same one I asked way back here (http://www.experts-exchange.com/Q_23242618.html#a21151195)

If I understand correctly, you are looking for the "DivContent" within the current row to be "hidden".

General case code would make use of a getElementsByClassName() routine
(e.g., something like http://javascript.about.com/library/bldom08.htm) to locate the div in the current row with the divContentOn or divContentOff classname.

If found, change the classname accordingly.

 

by: dtreadway7Posted on 2008-03-19 at 10:06:50ID: 21163453

Ya, we could do that. We could also use (getELementByName). It returns as a collection too and as long as your (name="") is paired with an exact matching (id="") then it works in IE too.

So you saying identify the content div by putting a name on it. However, does this walk through only the elements in the TR, or the whole document? I'm guessing we are going to do (tr.getElementByName('contentDiv')) or how wil you access that element? childNode(getElemByN())?

Show me the way. :)

 

by: dtreadway7Posted on 2008-03-19 at 10:08:58ID: 21163476

thisRow(obj, getELementByName('')) ?

 

by: dtreadway7Posted on 2008-03-19 at 10:13:08ID: 21163512

I thought I might have been able to get away with this:

<input type="button" value="+/-" style="float:left;" onclick="thisRow(getElementByName('DivContent').className='divContentOff');" />

but no. Almost. :)

 

by: dtreadway7Posted on 2008-03-19 at 10:29:40ID: 21163683

Almost there...I can make the row disappear now. What you think about this for the hide:

  function hideRow(obj)
  {
       var newTR = thisRow( obj, 'TR' );
        if ( newTR ) {
            
          var newTRs = newTR.childNodes;
             
          for (var i=0;i<newTRs.length;i++) {
                  var cName = newTRs[i];
              if (cName)
                  newTRs[i].style.display = 'none';
        }
     }
  }

 

by: dtreadway7Posted on 2008-03-19 at 10:31:43ID: 21163708

Need to target specifically that div called "DivContent" though. Tried getElementById("DivContent") but it didn't work.

Tried (newTRs[i].childNodes("DivContent").style...) but that didn't work either. Hmmm

 

by: dtreadway7Posted on 2008-03-19 at 10:37:53ID: 21163776

ok, its cause:

(var newTRs = newTR.childNodes)

is only returning the single cell from within the TR, gotta get to that next set chilNodes for the cell. THen I think I can use something like (newTRs[i].items(3).style.display=...). Would be nice to get the little sucker by name though.

Where you at HG? Im gonna write a new web browser if you don't hurry! :)

 

by: dtreadway7Posted on 2008-03-19 at 11:03:28ID: 21164066

Yep sure enough, got the content to hide now, still not sure this is the best way since I am using an elements position as the target. I created a new thisCell function, just like (thisRow), then I passed it into the hide function like so:

  function thisCell( obj ) {
    var td = obj;
    while ( td && td.nodeName != 'TD' ) {
      td = td.parentNode;
    }
    return td;
  }

  function hideRow(obj)
  {
      
       var newCell = thisCell( obj, 'TD' );
            if ( newCell ) {
            
          var newCells = newCell.childNodes;
                          
                  for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
           
                                     if (cName)
                                     //alert(cName.childNodes.length)
                  cName.childNodes[2].style.display = 'none';
                    }
     }
  }

 

by: dtreadway7Posted on 2008-03-19 at 11:10:45ID: 21164141

And we have TOGGLE!!! So far we 100% cross browser too!!

Code:

 function hideRow(obj)
 {
       var newCell = thisCell( obj, 'TD' );
            if ( newCell ) {
            
          var newCells = newCell.childNodes;
                          
                  for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
           
                                     if (cName.childNodes[2].className != 'divContentOn') {
                                         cName.childNodes[2].className = 'divContentOn';
                                                 } else {
                                                 cName.childNodes[2].className = 'divContentOff';
                                                 }
                                     //alert(cName.childNodes.length)
                 //cName.childNodes[2].style.display = 'none';
                    }
     }
  }

 

by: dtreadway7Posted on 2008-03-19 at 11:13:58ID: 21164178

still not excited about "..childNodes[2].." targeting but it works. Surely I can use a (getElementSomthing) here now that I have returned the cells childnode collection. Its obviously simple and escaping me right now. Dang. Anyways, almost there man...almost there.


Code:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.setAttribute("NAME", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', 'Form1');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var btnEl = document.createElement('div');
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('form');
		divForm.setAttribute('method', 'post');
		divForm.setAttribute('ID', 'Form2');
		divForm.setAttribute('action', '#');
    //put a place holder  input
    		var divTr = document.createElement('input');
    		divTr.setAttribute('type', 'text');
    		divTr.setAttribute('name', '');
    		divTr.setAttribute('size', '40');
    		divTr.setAttribute('value', "Content"); 
		//Append the input to form		
    divForm.appendChild(divTr);
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
}
 
 
 
 DTWindow.prototype.close = function()
{	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 
 
 
  //------------------------------------------------------------------
  // Name: thisNode()
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained in the requested
  //       type, this routine returns null;
  //------------------------------------------------------------------
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
  //------------------------------------------------------------------
  // Name: rowNum()
  // Role: Determine which row of the table we are using
  // Note: If the element reference provided is not within a TR, then
  //       this routine returns -1;
  //------------------------------------------------------------------
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	
	 function thisCell( obj ) {
    var td = obj;
    while ( td && td.nodeName != 'TD' ) {
      td = td.parentNode;
    }
    return td;
  }
 
 function addCurrentRow( obj )
 {
   var tbl = thisNode( obj, 'TABLE' );
	 var row = tbl.insertRow( -1 );  
   var num = rowNum( row );    
		
		if ( tbl ) {
		num = rowNum( obj ) - 1;  
		var newTR= tbl.rows[1].cloneNode(true);
     			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[num];
      insertHere.parentNode.insertBefore(newTR,insertHere);
   } 
  }
	
	
	
	
 function hideRow(obj)
 {
	 var newCell = thisCell( obj, 'TD' );
		if ( newCell ) {
		
	    var newCells = newCell.childNodes;
			        
			for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
           
						 if (cName.childNodes[2].className != 'divContentOn') {
						     cName.childNodes[2].className = 'divContentOn';
								 } else {
								 cName.childNodes[2].className = 'divContentOff';
								 }
						 //alert(cName.childNodes.length)
                 //cName.childNodes[2].style.display = 'none';
  			}
     } 
  }
 
 
  function deleteRows(rowObjArray)
  {
  		for (var i=0; i<rowObjArray.length; i++) {
  			var rIndex = rowObjArray[i].sectionRowIndex;
  			rowObjArray[i].parentNode.deleteRow(rIndex);
  	}
  }
 
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
 
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
<div id="buttonTemplate" style="display:none;">
 
<input type="button" value="+/-" style="float:left;" onclick="hideRow(this);" />
<input type="button" value="ah" style="float:left;" onclick="addCurrentRow(this);" />
<input type="button" value="D" style="float:left;" onclick="deleteCurrentRow(this);" />
 
</div>
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 11:30:20ID: 21164300

Ok, here is the cleaned up code a little bit. And by no coincidence do see that we have useful functions left:

function insertRows(rowObjArray)
{
            for (var i=0; i<rowObjArray.length; i++) {
                  var rIndex = rowObjArray[i].sectionRowIndex;
                  rowObjArray[i].parentNode.insertRow(rIndex);
      }
}

function reorderRows(tbl, startingIndex)
{
            if (tbl.rows[startingIndex]) {
                  var count = startingIndex + ROW_BASE +1;
                  for (var i=startingIndex; i<tbl.rows.length; i++) {
                  count++;
            }
      }
} 

function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 12:14:25ID: 21164798

Mmoved the actual form elements outside in a template div as well. Everything coming in ok cept, in IE6 I can't drillDown the selects inside the contentForm. Only in IE6 though.

Heres what I got now man:

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 fond-size: 14px;
 background-color: lime;
 cursor: default;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 width:100px;
 height:30px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 height:30px;
 float:right;
}
.divContentOn
{
 position:relative;
 border:1px #333 solid;
 clear:both;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.setAttribute('ID', 'ImThePapa');
	this.dTable.border = 1;
 
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// minimize
	this.dMinTD = dTR.insertCell(1);
	//this.dMinTD.innerHTML = "_";
	this.dMinTD.innerHTML = "&nbsp;&nbsp;&nbsp;";
	//this.dMinTD.onmousedown = DTWindow.prototype.onMinimize;
	this.dMinTD.DTWindow = this;
	
	// close
	this.dTD = dTR.insertCell(2);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
 
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// footer	 
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 3);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		       //dTR3.className = 'classy';
					 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       //Append the mainDiv to the cell
		       cell0.appendChild(mainDiv);
	
		
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.setAttribute("NAME", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', '');
		divForm2.setAttribute('action', '#');
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '35');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var btnEl = document.createElement('div');
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('div');
		divForm.innerHTML = document.getElementById('formTemplate').innerHTML;
		//Append the form  to the content div
		DivContent.appendChild(divForm);
}
 
		
 //Role: Add a row to the table just at end of table		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
}
 
 
 //Role: close containing table
 DTWindow.prototype.close = function()
 {	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 //Role: Add a row above the row the where addCurrentRow function is fired
 function addCurrentRow( obj )
 {
   var tbl = thisNode( obj, 'TABLE' );
	 var row = tbl.insertRow( -1 );  
   var num = rowNum( row );    
		
		if ( tbl ) {
		num = rowNum( obj ) - 1;  
		var newTR= tbl.rows[1].cloneNode(true);
     			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[num];
      insertHere.parentNode.insertBefore(newTR,insertHere);
   } 
  }
	
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained this routine returns null;
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
 // Role: Look up the hierarchy to locate the containing TR
  // Note: If the specified element is not contained this routine returns null;
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	// Role: Look up the hierarchy to locate the containing TD
  // Note: If the specified element is not contained this routine returns null;
	 function thisCell( obj ) {
    var td = obj;
    while ( td && td.nodeName != 'TD' ) {
      td = td.parentNode;
    }
    return td;
  } 
	
  // Role: Determine which row of the table we are using
  // Note: If the element  not within a TR this routine returns -1;
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 
//Role: Hide/Show the ContentDiv in the row firing this function
 function hideRow(obj)
 {
	 var newCell = thisCell( obj, 'TD' );
		if ( newCell ) {
		
	    var newCells = newCell.childNodes;
			        
			for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
           
						 if (cName.childNodes[2].className != 'divContentOn') {
						     cName.childNodes[2].className = 'divContentOn';
								 } else {
								 cName.childNodes[2].className = 'divContentOff';
								 }
				}
     } 
  }
 
	
	//Role: delete the current row
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
	//Role: get all the contained elements in the row
  function deleteRows(rowObjArray)
  {
  		for (var i=0; i<rowObjArray.length; i++) {
  			var rIndex = rowObjArray[i].sectionRowIndex;
  			rowObjArray[i].parentNode.deleteRow(rIndex);
  	}
  }
 
	
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
 
<div id="buttonTemplate" style="display:none;">
 
    <input type="button" value="+/-" style="float:left;" onclick="hideRow(this);" />
    <input type="button" value="ah" style="float:left;" onclick="addCurrentRow(this);" />
    <input type="button" value="D" style="float:left;" onclick="deleteCurrentRow(this);" />
 
</div>
<div id="formTemplate" style="display:none;">
      <form name="" action="#" method="post">
      <select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'>
      <option value='0' selected>[SELECT]</option>
      <option value='1'>Employment</option>
      <option value='2'>State</option>
      <option value='3'>Other</option>
      </select><br>
      <select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'>
      <option value='0' selected>[SELECT]</option>
      </select><br>
      <select id='thirdChoice' name='thirdChoice'>
      <option value='0' selected>[SELECT]</option>
      </select>
      </form>
</div>
 
 
 
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 12:46:47ID: 21165160

Ok HG, you gonna like this. Went ahead and tidy'd up some more, corrected the CSS and removed that extra  <form> space by setting the form display to (dislay:inline), adjusted the top position by 5px, and the bottom-margin:5px, to account.

Results: No vertical gap between content and row controls. Solid in all 4 browsers. Peruse this:

 

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 font-weight: bold;
 font-size: 14px;
 background-color: lime;
 cursor: default;
}
.thisTR{
 font-size:0pt;
}
.dTable{
 margin:0px;
 padding:0px;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 font-size: 8pt;
 width:90px;
 
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 float:right;
}
.divContentOn
{
 position:relative;
 top:5px;
 margin-bottom:5px;
 border:1px #333 solid;
 clear:left;
}
.divContentOff
{
 position:relative;
 border:1px #333 solid;
 clear:both;
 display:none;
}
</style>
<script language=javascript>
// The magic
function objText(d)
{
	var s = new Array();
	s.push('{<br>');
	for ( var i in d )
	s.push("&nbsp;&nbsp;&nbsp;" + i + ": " + d[i] + "<br>");
	s.push('}');
	return s.join('');
}
 
//Set up our globals (hasLoaded not nec but may be useful later
var INPUT_NAME_PREFIX = 'inputName'; 
var ROW_BASE = 1; 
var hasLoaded = true;
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
	this.dTable.setAttribute("id", "dTable");
	this.dTable.setAttribute("cellSpacing", 0);
	this.dTable.setAttribute("cellPadding", 0);
	this.dTable.setAttribute("className", "DTWindow");
	// set the position of the window
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// close
	this.dTD = dTR.insertCell(1);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
  //insert row for footer
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowTitleStyle";
		
	// tooter
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Set";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 2);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
 
 
    var dTR3 = this.dTable.insertRow(1);
		  		 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.setAttribute('className','thisTR');
					 dTR3.style.display = 'none';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
		//Create a single cell to go in the row that will hold all the divs
		var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       cell0.appendChild(mainDiv);
	
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', '');
		divForm2.setAttribute('action', '#');
		divForm2.style.display = 'inline';
		
		    
				var divTr2 = document.createElement('input');
            	 divTr2.setAttribute('type', 'text');
            	 divTr2.setAttribute('name', "");
            	 divTr2.setAttribute('size', '20');
            	 divTr2.setAttribute('value', "RowName"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		var btnEl = document.createElement('div');
					 //grab buttons as innerHTML cuz cloned functions wont fire
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('div');
		divForm.innerHTML = document.getElementById('formTemplate').innerHTML;
		DivContent.appendChild(divForm);
}
 
		
 //Role: Add a row to the table just at end of table		
DTWindow.prototype.onAddRow = function()
{
	this.DTWindow.AddRow();
}
DTWindow.prototype.AddRow = function(num)
{
  counter = 0;
  var tbl = this.dTable.tBodies[0];
				 
			var newTR= tbl.rows[1].cloneNode(true);
      			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
}
 
 
 //Role: close containing table
 DTWindow.prototype.close = function()
 {	
	// remove from browser document
	this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	this.DTWindow.close();
}
 
 
 //Role: Add a row above the row the where addCurrentRow function is fired
 function addCurrentRow( obj )
 {
   var tbl = thisNode( obj, 'TABLE' );
	 var row = tbl.insertRow( -1 );  
   var num = rowNum( row );    
		
		if ( tbl ) {
		num = rowNum( obj ) - 1;  
		var newTR= tbl.rows[1].cloneNode(true);
     			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
            var theName = newTRs[i].name;
            var theID = newTRs[i].id;
						 if (theName)
                  newTRs[i].name = theName + counter;
						if (theID)
						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[num];
      insertHere.parentNode.insertBefore(newTR,insertHere);
   } 
  }
	
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained this routine returns null;
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
 // Role: Look up the hierarchy to locate the containing TR
  // Note: If the specified element is not contained this routine returns null;
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	// Role: Look up the hierarchy to locate the containing TD
  // Note: If the specified element is not contained this routine returns null;
	 function thisCell( obj ) {
    var td = obj;
    while ( td && td.nodeName != 'TD' ) {
      td = td.parentNode;
    }
    return td;
  } 
	
  // Role: Determine which row of the table we are using
  // Note: If the element  not within a TR this routine returns -1;
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 
//Role: Hide/Show the ContentDiv in the row firing this function
 function hideRow(obj)
 {
	 var newCell = thisCell( obj, 'TD' );
		if ( newCell ) {
		
	    var newCells = newCell.childNodes;
			        
			for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
           
						 if (cName.childNodes[2].className != 'divContentOn') {
						     cName.childNodes[2].className = 'divContentOn';
								 } else {
								 cName.childNodes[2].className = 'divContentOff';
								 }
				}
     } 
  }
 
	
	//Role: delete the current row
  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    if ( tbl ) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'deleteCurentRow() - specified element is not in a TABLE' );
    }
  }
 
	//Role: get all the contained elements in the row
  function deleteRows(rowObjArray)
  {
  		for (var i=0; i<rowObjArray.length; i++) {
  			var rIndex = rowObjArray[i].sectionRowIndex;
  			rowObjArray[i].parentNode.deleteRow(rIndex);
  	}
  }
 
	
 
function insertRows(rowObjArray)
{
		for (var i=0; i<rowObjArray.length; i++) {
			var rIndex = rowObjArray[i].sectionRowIndex;
			rowObjArray[i].parentNode.insertRow(rIndex);
	}
}
 
function reorderRows(tbl, startingIndex)
{
		if (tbl.rows[startingIndex]) {
			var count = startingIndex + ROW_BASE +1;
			for (var i=startingIndex; i<tbl.rows.length; i++) {
			count++;
		}
	}
}
 
 
 
function createDWindow()
{
	var dDiv = document.createElement("div");
	dDiv.style.width = "350px";
	dDiv.style.height = "80px";
	new DTWindow(document.getElementById('wName').value);
	
}
 
</script>
</head>
 
 
<body >
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<p>Please Type in a name for your new ctieria set. Then click the button below.</p>
 
<div id="buttonTemplate" style="display:none;">
 
    <input type="button" value="+/-" style="float:left;" onclick="hideRow(this);" />
    <input type="button" value="ah" style="float:left;" onclick="addCurrentRow(this);" />
    <input type="button" value="D" style="float:left;" onclick="deleteCurrentRow(this);" />
 
</div>
<div id="formTemplate" style="display:none;">
      <form name="" action="#" method="post" style="display:inline;">
      <select id='firstChoice' name='firstChoice' onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'>
      <option value='0' selected>[SELECT]</option>
      <option value='1'>Employment</option>
      <option value='2'>State</option>
      <option value='3'>Other</option>
      </select><br>
      <select id='secondChoice' name='secondChoice' onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'>
      <option value='0' selected>[SELECT]</option>
      </select><br>
      <select id='thirdChoice' name='thirdChoice'>
      <option value='0' selected>[SELECT]</option>
      </select>
      </form>
</div>
 
 
 
<input id=wName value="New Window">
<button onclick="createDWindow();">Create New Window</button>
	
 
	
 
	
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-19 at 19:40:27ID: 21167838

Alright, well HG thanks man. I think I got it under control. More than a solution, a nice JS Dynamic Lesson. Thanks HG! I think I like this site now. I might go ahead and pay the full amount now!

 

by: dtreadway7Posted on 2008-03-19 at 19:56:55ID: 21167923

Come back on and check this post and paste that code from the last post so we show the final solution (for others) and I can award those well earned points!

 

by: HonorGodPosted on 2008-03-20 at 06:02:20ID: 21170829

Thanks for the compliments, and interactive/iterative interchange.

Sorry for being away for awhile, I had stuff I had to do yesterday, and wasn't feeling too well.

Unfortunately, the code isn't quite perfect.

Using FF:

- Click "Create New Window" button
- Click on the "Add Another Ctierie"  [which continues to be misspelled :-)]
- Click the "ah" button, and we get the following.

Note how the "New Window" row is no longer at the top of the table

 

by: dtreadway7Posted on 2008-03-20 at 08:44:58ID: 21172680

Oh, haha. HG, Its all done man. I finished rest of it. Some even more disturbing problems than that one, which I fixed, btw. Were that when you cloned the form elements, the onChange events still had a problem in IE6 (only).

I worked around it by cloning and then grabbing a fresh copy of the form each time. I added quite a lot of things actually. You gave me the missing pieces and I was able to run with it. Thank you!!

Other new features are:
  -if row open, edit button is gone and a new (add) button appears at the bottom of the row. Only one or      the other will be shown. (You will see)
  -Make sure that after clone, the row is always open...even if it was closed when cloned.

However, I am still having a slight issue.

I have set a piece of code int the delete function to track if the row is the last row, and not DELETE it if it is. You had formally had it there to return an error if the parent element was not a TR.  When I use a normal addRow function the  catch works perfectly. However if I addCurentRow(), it doesnt check and the table can be emptied completely. Take a look? Here is the latest. And yes, it Cross-Browser across the board.

Also, I went ahead and (redout) the images I had replaced the buttons with. So thats why they red and ugly. :)

<html>
<head>
<script language="JavaScript" src="drillDowns.js"/></script>
<style>
.DTWindowTitleStyle
{
 padding:5px;
 font-family:arial;
 font-weight: bold;
 font-size: 10pt;
 color:#ffffff;
 background-color:#676767;
 cursor: default;
}
.DTWindowAddAnother{
 padding:5px;
 font-family:arial;
 font-weight: normal;
 font-size: 9pt;
 color:#0000ff;
 background-color:#ffff99;
 text-decoration:underline;
 cursor:pointer;
}
.formLbls{
 font-family:arial;
 font-weight: bold;
 font-size: 9pt;
 color:#000000;
}
.formSelects{
 float:left;
 
}
.dTable{
 margin:0px;
 padding:0px;
}
.mainDiv
{
 width:300px;
 position:relative;
 padding:0px;
 margin:0px;
}
.divRowName
{
 float:left;
 font-size: 8pt;
 width:90px;
}
.divRowName input
{
 border:0;
 background-color:transparent;
}
.divCtrls
{
 float:right;
}
.divContentOn
{
 position:relative;
 top:0px;
 padding:5px;
 margin:10px;
 border:1px #333 solid;
 background-color:#ffff99;
 clear:left;
}
.divContentOff
{
 position:relative;
 clear:both;
 display:none;
}
.TableDiv{
  position:relative;
  padding-bottom:10px;
	border:1px red solid;
}
.editImg{
 position:relative;
 top:3px;
 width:14px;
 height:13px;
 background-color:red;
 border:1px #000 solid;
 cursor:pointer;
}
.addInPlaceImg{
 position:relative;
 top:3px;
 width:14px;
 height:13px;
  background-color:red;
	border:1px #000 solid;
 cursor:pointer;
}
.deleteImg{
 position:relative;
 top:3px;
 width:14px;
 height:13px;
 background-color:red;
 border:1px #000 solid;
 cursor:pointer;
}
.doneImg{
 position:relative;
 top:5px;
 float:right;
 padding-bottom:5px;
 width:92px;
 height:23px;
 border:1px #000 solid;
 background-color:red;
 cursor:pointer;
}
 
</style>
<script language=javascript>
 
 
//Set up our globals (hasLoaded not nec but may be useful later
var ROW_BASE = 1; 
 
//Window Function
function DTWindow(title)
{
	// save arguments
	this.title = title;
	
	// create Main table for window with title-bar and content
	this.dTable = document.createElement("table");
	this.dTable.border = 1;
	this.dTable.setAttribute("id", "dTable");
	this.dTable.setAttribute("cellSpacing", 0);
	this.dTable.setAttribute("cellPadding", 0);
	this.dTable.style.position = "relative";
	this.dTable.style.backgroundColor = "white";
 
	// link from the table to the DTWindow object
	this.dTable.DTWindow = this;
 
	// append to document body
	document.body.appendChild(this.dTable);
 
	
	// Main table - add row for title bar
	var dTR = this.dTable.insertRow(0);
	dTR.className = "DTWindowTitleStyle";
 
	// Main table - title	
	var dTD = dTR.insertCell(0);
	dTD.innerHTML = title;
	dTD.DTWindow = this;
 
	// Main table - close
	this.dTD = dTR.insertCell(1);
	this.dTD.innerHTML = "X";
	this.dTD.DTWindow = this;	
	this.dTD.onmousedown = DTWindow.prototype.onClose;
	
  //insert row for footer
	var dTR2 = this.dTable.insertRow(-1);
	dTR2.className = "DTWindowAddAnother";
		
	// tooter
	var dTD2 = dTR2.insertCell(0);
	dTD2.innerHTML = "Add Another Ctieria Statement";
	dTD2.DTWindow = this;
	dTD2.setAttribute("colSpan", 2);
	dTD2.onmousedown = DTWindow.prototype.onAddRow;
					 
	//create a displayed 1st row
	  var dTR3 = this.dTable.insertRow(1);
		  		 dTR3.setAttribute('name','');
					 dTR3.setAttribute('id','');
					 dTR3.style.display = '';
	
		//Create a main parent div ito go in a single row cell
		var mainDiv = document.createElement('div');
		       mainDiv.setAttribute('height', 160);
					 mainDiv.setAttribute('ID', 'mainDiv');
					 mainDiv.className = 'mainDiv';
		
   //Create a single cell in the row, place mainDiv in it
   var cell0 = dTR3.insertCell(0);
					 cell0.setAttribute("vAlign", "top");
		       cell0.appendChild(mainDiv);	
					 
		 //Create a Div for the rowName and assign a class to float left
		var DivRowName = document.createElement('div');
		       DivRowName.setAttribute("ID", "RowName");
		       DivRowName.className = 'divRowName';
					 
	//Create a div for the RowButtons (delete) (+/-) (addRowHere)				
		var DivCtrls = document.createElement('div');
		       DivCtrls.setAttribute("ID", "DivCtrls");
					 DivCtrls.className = 'divCtrls';
					 
		//Create a div for the Content	Div and assign CSS to place on bottom		
		var DivContent = document.createElement('div');
		 			 DivContent.setAttribute("ID", "DivContent");
					 DivContent.className = 'divContentOn';
		
		//Append our divs to the Main Parent Div
		mainDiv.appendChild(DivRowName);
		mainDiv.appendChild(DivCtrls);
		mainDiv.appendChild(DivContent);
		
		//create a Form for our rowName
		var divForm2 = document.createElement('form');
		divForm2.setAttribute('method', 'post');
		divForm2.setAttribute('ID', '');
		divForm2.setAttribute('action', '#');
		divForm2.style.display = 'inline';
		    
		//put in an input		
		var divTr2 = document.createElement('input');
          	 divTr2.setAttribute('type', 'text');
          	 divTr2.setAttribute('name', "");
          	 divTr2.setAttribute('size', '30');
          	 divTr2.setAttribute('value', "Please Select Edit to Complete"); 
            
		divForm2.appendChild(divTr2);
		DivRowName.appendChild(divForm2);
		
		//create row control buttons
		var btnEl = document.createElement('div');
					 btnEl.innerHTML = document.getElementById('buttonTemplate').innerHTML;
					 DivCtrls.appendChild(btnEl);
		
		//Create second form for the contentDiv 
		var divForm = document.createElement('div');
		divForm.innerHTML = document.getElementById('formTemplate').innerHTML;
		DivContent.appendChild(divForm);
}
 
		
 //Role: Add a row to the table just at end of table		
  DTWindow.prototype.onAddRow = function()
  {
  	this.DTWindow.AddRow();
  }
  DTWindow.prototype.AddRow = function(num)
  {
    counter = 0;
    var tbl = this.dTable.tBodies[0];
  				 
  			var newTR= tbl.rows[1].cloneNode(true);
        			 newTR.style.display = ''; 
        var newTRs = newTR.childNodes;
  
  			for (var i=0;i<newTRs.length;i++) {
               var theName = newTRs[i].name;
               var theID = newTRs[i].id;
          						if (theName)
                           newTRs[i].name = theName + counter;
          						if (theID)
          						     newTRs[i].id = theID + counter;			
        }
        var insertHere = tbl.rows[1];
        insertHere.parentNode.insertBefore(newTR,insertHere);
	     // we Need to grab the form content as innerHTML because IE6 doesn't like cloned selects  
   			newTR.childNodes[0].firstChild.childNodes[2].innerHTML = document.getElementById('formTemplate').innerHTML;
				newTR.childNodes[0].firstChild.childNodes[2].className = 'divContentOn'
   
	}
 
 
 //Role: close containing table
 DTWindow.prototype.close = function()
 {	
		 // remove from browser document
		 this.dTable.parentNode.removeChild(this.dTable);
  }
  DTWindow.prototype.onClose = function()
  {
	 	 this.DTWindow.close();
  }
 
 
 //Role: Add a row above the row the where addCurrentRow function is fired
 function addCurrentRow( obj )
 {
   var tbl = thisNode( obj, 'TABLE' );
	 var row = tbl.insertRow( -1 );  
   var num = rowNum( row );    
		
		if ( tbl ) {
		num = rowNum( obj ) - 1;  
		var newTR= tbl.rows[1].cloneNode(true);
     			 newTR.style.display = ''; 
      var newTRs = newTR.childNodes;
 
			for (var i=0;i<newTRs.length;i++) {
             var theName = newTRs[i].name;
             var theID = newTRs[i].id;
        						 if (theName)
                          newTRs[i].name = theName + counter;
        						 if (theID)
        						      newTRs[i].id = theID + counter;			
      }
      var insertHere = tbl.rows[num +1];
      insertHere.parentNode.insertBefore(newTR,insertHere);
			// we Need to grab the form content as innerHTML because IE6 doesn't like cloned selects  
   		newTR.childNodes[0].firstChild.childNodes[2].innerHTML = document.getElementById('formTemplate').innerHTML;
			newTR.childNodes[0].firstChild.childNodes[2].className = 'divContentOn'
   } 
  }
	
  // Role: Look up the hierarchy to locate the containing element type
  // Note: If the specified element is not contained this routine returns null;
  function thisNode( obj, kind ) {
    var node = obj;
    while ( node && node.nodeName != kind ) {
      node = node.parentNode;
    }
    return node;
  }
 
 // Role: Look up the hierarchy to locate the containing TR
  // Note: If the specified element is not contained this routine returns null;
 function thisRow( obj ) {
    var tr = obj;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.parentNode;
    }
    return tr;
  }
	
	// Role: Look up the hierarchy to locate the containing TD
  // Note: If the specified element is not contained this routine returns null;
	 function thisCell( obj ) {
    var td = obj;
    while ( td && td.nodeName != 'TD' ) {
      td = td.parentNode;
    }
    return td;
  } 
	
  // Role: Determine which row of the table we are using
  // Note: If the element  not within a TR this routine returns -1;
  function rowNum( obj ) {
    var row = thisNode( obj, 'TR' );        // Locate containing row
    var result = -1;
    if ( row ) {
      var tbl = thisNode( row, 'TABLE' );   // Locate containing table
      if ( tbl ) {
        for ( var num = 0; num < tbl.rows.length; num++ ) {
          if ( tbl.rows[ num ] == row ) {
            return num;
          }
        }
      }
    }
    return result;
  }
 
 
//Role: Hide/Show the ContentDiv in the row firing this function
 function hideRow(obj)
 {
	 var newCell = thisCell( obj, 'TD' );
		if ( newCell ) {
		
	    var newCells = newCell.childNodes;
			        
			for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
					 
						 if (cName.childNodes[2].className != 'divContentOn') {
								  cName.childNodes[2].className = 'divContentOn';
								 
								    if(document.all){   //IE sees the (edit button) as [0] in the collection
								    cName.childNodes[1].firstChild.childNodes[0].style.display = 'none';
								    } else {   //FF sees the (edit button) as [1] in the collection
								    cName.childNodes[1].firstChild.childNodes[1].style.display = 'none';
								    }
						
							} else {
								    cName.childNodes[2].className = 'divContentOff';		 		 
								 
						         if(document.all){ 
								     cName.childNodes[1].firstChild.childNodes[0].style.display = '';
								     } else {
								     cName.childNodes[1].firstChild.childNodes[1].style.display = '';
								     }
							}
				   }
        } 
	 }
 
	
	//Role: delete the current row
  function deleteCurrentRow( obj )
	{
    var tbl = thisNode( obj, 'TABLE' );
    var tblRows = tbl.rows.length;
    if ( tbl && tblRows > 3) {
          tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'You cannot Delete the Last Row.' );
    }
  }
 
	//Role: get all the contained elements in the row
  function deleteRows(rowObjArray)
  {
  		for (var i=0; i<rowObjArray.length; i++) {
  			var rIndex = rowObjArray[i].sectionRowIndex;
  			rowObjArray[i].parentNode.deleteRow(rIndex);
  	}
  }
 
 
  function insertRows(rowObjArray)
  {
  		for (var i=0; i<rowObjArray.length; i++) {
  			var rIndex = rowObjArray[i].sectionRowIndex;
  			rowObjArray[i].parentNode.insertRow(rIndex);
  	}
  }
 
  function reorderRows(tbl, startingIndex)
  {
  		if (tbl.rows[startingIndex]) {
  			var count = startingIndex + ROW_BASE +1;
  			for (var i=startingIndex; i<tbl.rows.length; i++) {
  			count++;
  		}
  	}
  }
 
  function createDWindow()
  {
  	new DTWindow(document.getElementById('wName').value);
  }
 
</script>
</head>
 
 
<body >
 
    <p>Please Type in a name for your new ctieria set. Then click the button below.</p>
     
    <input id=wName value="New Criteria Set">
    <button onclick="createDWindow();">Create New Window</button>
    	
    	
    <div id="buttonTemplate" style="display:none;">
		
        <div style="float:left;display:none;" class="editImg" onclick="hideRow(this);" >e</div>
        <div style="float:left;" class="addInPlaceImg" onclick="addCurrentRow(this);" >a</div>
        <div style="float:left;" class="deleteImg" onclick="deleteCurrentRow(this);" >d</div>
				
    </div>
		
    <div id="formTemplate" style="display:none;">
		
          <form name="" action="#" method="post" style="display:inline; margin:0px;">
          <table cellpadding="0" cellspacing="0" border="0"><tr>
					<td class="formLbls">Field:</td><td><select id='firstChoice' name='firstChoice'  onchange='selectChange(this, secondChoice, arrItems1, arrItemsGrp1)'>
          <option value='0' selected>[SELECT]</option>
          <option value='1'>Employment</option>
          <option value='2'>State</option>
          <option value='3'>Other</option>
          </select></td>
					</tr><tr>
          <td class="formLbls">Operator:</td><td><select id='secondChoice' name='secondChoice'  onchange='selectChange(this, thirdChoice, arrItems2, arrItemsGrp2)'>
          <option value='0' selected>[SELECT]</option>
          </select></td>
					</tr><tr>
          <td class="formLbls">Compare with:</td><td><select id='thirdChoice' name='thirdChoice'>
          <option value='0' selected>[SELECT]</option>
          </select></td>
					</tr></table>
          </form>
					<div style="height:2px; width:1px;"></div>
    			<div class="doneImg"  onclick="hideRow(this);">add</div>
					
    </div>
	
</body>
</html>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
288:
289:
290:
291:
292:
293:
294:
295:
296:
297:
298:
299:
300:
301:
302:
303:
304:
305:
306:
307:
308:
309:
310:
311:
312:
313:
314:
315:
316:
317:
318:
319:
320:
321:
322:
323:
324:
325:
326:
327:
328:
329:
330:
331:
332:
333:
334:
335:
336:
337:
338:
339:
340:
341:
342:
343:
344:
345:
346:
347:
348:
349:
350:
351:
352:
353:
354:
355:
356:
357:
358:
359:
360:
361:
362:
363:
364:
365:
366:
367:
368:
369:
370:
371:
372:
373:
374:
375:
376:
377:
378:
379:
380:
381:
382:
383:
384:
385:
386:
387:
388:
389:
390:
391:
392:
393:
394:
395:
396:
397:
398:
399:
400:
401:
402:
403:
404:
405:
406:
407:
408:
409:
410:
411:
412:
413:
414:
415:
416:
417:
418:
419:
420:
421:
422:
423:
424:
425:
426:
427:
428:
429:
430:
431:
432:
433:
434:
435:
436:
437:
438:
439:
440:
441:
442:
443:
444:
445:
446:
447:
448:
449:
450:
451:
452:
453:
454:
455:
456:
457:
458:
459:
460:
461:
462:
463:
464:
465:
466:
467:
468:
469:
470:
471:
472:
473:
474:
475:
476:
477:
478:
479:
480:
481:
482:
483:
484:
485:
486:
487:
488:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-20 at 08:46:36ID: 21172704

Some not so great things were of course how I am targeting the (edit) button. Had to put a simple sniffer in, since NN saw that childNode as (1) and IE saw the node as (0).

function hideRow(obj)
 {
       var newCell = thisCell( obj, 'TD' );
            if ( newCell ) {
            
          var newCells = newCell.childNodes;
                          
                  for (var i=0;i<newCells.length;i++) {
            var cName = newCells[i];
                              
                                     if (cName.childNodes[2].className != 'divContentOn') {
                                                  cName.childNodes[2].className = 'divContentOn';
                                                 
                                                    if(document.all){   //IE sees the (edit button) as [0] in the collection
                                                    cName.childNodes[1].firstChild.childNodes[0].style.display = 'none';
                                                    } else {   //FF sees the (edit button) as [1] in the collection
                                                    cName.childNodes[1].firstChild.childNodes[1].style.display = 'none';
                                                    }
                                    
                                          } else {
                                                    cName.childNodes[2].className = 'divContentOff';                          
                                                 
                                             if(document.all){
                                                     cName.childNodes[1].firstChild.childNodes[0].style.display = '';
                                                     } else {
                                                     cName.childNodes[1].firstChild.childNodes[1].style.display = '';
                                                     }
                                          }
                           }
        }
       }

 

by: HonorGodPosted on 2008-03-20 at 08:51:25ID: 21172752

"... However if I addCurentRow(), it doesnt check and the table can be emptied completely. .."

Ok, at what do you want me to look?

Extra notes:
- It is best if you have a DOCTYPE tag at the beginning of your document (i.e., add the following line before the <html> tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

- It is also better to use the type attribute on the script tags instead of Language.  So change from:

<script language="JavaScript" src="drillDowns.js"/></script>

To:

<script type="text/javascript" src="drillDowns.js"/></script>

 

by: dtreadway7Posted on 2008-03-20 at 08:53:06ID: 21172770

How to return those DOM objects like (tr), (td), (node)... that was hard. If you hadn;t shown me th light on that I would never have got it working. The cloning difficulties were annoying but workable. I still have 2 functions that we didnt really use, but I am not getting rid of them as I may need them soon, actually.

If you see some ways to fine tune, make better, etc...please feel free to show me. I am liking this dynamic technique of JS alot, Forces you to be good DOM programer really. Would like to use a little simpler targeting with (getSomething) since the (childNode.firstChild...) thing gets a little hairy. But overall I am happy and understand a great deal now.  

 

by: HonorGodPosted on 2008-03-20 at 08:54:39ID: 21172787

by the way, you were somewhat correct in your earlier update:

http://www.experts-exchange.com/Q_23242618.html#a21153173

except "long running thread" would generally be considered with respect to time (i.e., for how many days a question continues to get updates).

However, with > 200 updates this certainly has been a "busy" thread, especially with only you and I posting

 

by: dtreadway7Posted on 2008-03-20 at 08:55:59ID: 21172804

"... However if I addCurentRow(), it doesnt check and the table can be emptied completely. .."

Ok, at what do you want me to look?


1. Go ahead and create a table. Then try to delete that first row. You will get an error, which you should.
2. Now use the ("ah") to create a row. Now when you delete all the rows the error wont fire. How come?


 

by: HonorGodPosted on 2008-03-20 at 08:58:30ID: 21172824

regarding your recent update:

http://www.experts-exchange.com/Q_23242618.html#a21172770

generally it is better if the question is better targeted.  As you have seen, we have been over a number of items, and I'm quite certain that few people (other than you and I) are actually reading the question because of the number of updates.  Most people don't have the patients to wade through this many updates.  They would prefer a question with a small number of "on topic" updates/responses to point out the solution.

However, I'm just here to share some of my knowledge, and if that takes > 200 updates, that's fine.

 

by: dtreadway7Posted on 2008-03-20 at 08:59:22ID: 21172836

Haha, ya but, you taught me. You didnt just a give a hungry man a sandwich...you taught him how to farm. I feel extremely lucky and thank you again. I mean you would think EE could change the model a little bit for lessons. You know, Expert realizes that the person is low in some DOM knowledge and techniques.... "I see your low...want lessons?" Lessons could be worth more $$$ to the expert too!!

Just a thought. :) Lunch, be back in like 1hr.

 

by: HonorGodPosted on 2008-03-20 at 09:03:04ID: 21172869

I tried the steps you mentioned, and I see the

  • criteria.bmp
    • 107 KB

    What things looked like when I tried to delete "last row"

  • cant.bmp
    • 112 KB

    Can't delete last row

 

by: HonorGodPosted on 2008-03-20 at 09:04:04ID: 21172880

re: lunch... me too.

 

by: dtreadway7Posted on 2008-03-20 at 10:41:13ID: 21173755

Ok, yes, you got the alert. The alert only happens if you are trying to remove a  row that was added with the private (addRow()) function.

However, if you use the (addCurrentRow()) public function, to add a row, and then start deleting the rows, you will NOT see that alert, and it WILL delete all the rows in the table. The goal was to always have one row still in the table.

So, that is perplexing me.

 

by: HonorGodPosted on 2008-03-20 at 10:45:43ID: 21173799

I thought that is what I did, but apparently, I was wrong.

I was able to recreate.

looking...

 

by: HonorGodPosted on 2008-03-20 at 11:06:28ID: 21174019

What appears to be happening is that once a new row is added (using 'ah')
we (somehow) have a hidden row.  You can see this by adding the following
alert to deleteCurrentRow()

  function deleteCurrentRow( obj )
  {
    var tbl = thisNode( obj, 'TABLE' );
    var tblRows = tbl.rows.length;
    alert( 'deleteCurrentRow()  #rows: ' + tblRows );
    if ( tbl && tblRows > 3) {
      tbl.deleteRow( rowNum( obj ) );
    } else {
      alert( 'You cannot Delete the Last Row.' );
    }
  }
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

Select allOpen in new window

 

by: dtreadway7Posted on 2008-03-20 at 11:20:41ID: 21174157

Hmmm....SHouldnt be a hidden row. THere was one but I removed it. Now it just grabs everything from the Template and uses taht as the clone. Right? Hmmm.....I mean if you turn the (form template) on to show, it appears before the first row but, its not technically in the table.... or at least it shouldnt be.

 

by: dtreadway7Posted on 2008-03-20 at 11:24:04ID: 21174203

Ya, we have:

 1.) dTR(row1 -title row)
 2.) dTR2 (row2 -(footer row)
 3.) dTR3 (content row)

Why would clone add an additional....or is it that delete is not completey removing the row? Setting the row to (hidden) somehow? Hmmm.

 

by: dtreadway7Posted on 2008-03-20 at 11:25:58ID: 21174228

Could it be that it inserts the row as (-1) ( -1) or in position thats not in view?

 

by: dtreadway7Posted on 2008-03-20 at 11:32:12ID: 21174301

Try this in your delete function and then use "ah" and watch. It actually shows 2 rows as a total of (4) once  you add an additional row with ("ah"). Weird:

      //Role: delete the current row
  function deleteCurrentRow( obj )
      {
    var tbl = thisNode( obj, 'TABLE' );
    var tblRows = tbl.rows.length;
    if ( tbl && tblRows > 4) {
          tbl.deleteRow( rowNum( obj ) );
                              alert(tblRows)
                              
    } else {
              alert(tblRows)
      alert( 'You cannot Delete the Last Row.' );
    }
  }

 

by: dtreadway7Posted on 2008-03-20 at 11:33:04ID: 21174313

Like when we add with ("ah") we need to take the row count down by 1 or something.

 

by: dtreadway7Posted on 2008-03-20 at 11:43:03ID: 21174442

We need to tell (rowNum) to decrease the row count by 1. after a clone the row count goes from 3 to 5. After one row is removed the row Count still shows 4, making the condition pass. So, we are (or maybe) I am increasing the rowCount on (addCurrentRow) by +1 when I use the function. I can't seem the find where though.

Hmmm.

 

by: dtreadway7Posted on 2008-03-20 at 11:46:09ID: 21174474

Could this be serving 2 purposes?

var insertHere = tbl.rows[num +1];

Purpose 1.) tell it where to insert the row...
Purpose 2.) tell the row count to go up +1.

??

 

by: dtreadway7Posted on 2008-03-20 at 11:48:10ID: 21174498

If so, its an interesting double purpose full of possibilities. :) Not sure... it's something right there though.

 

by: HonorGodPosted on 2008-03-20 at 12:05:20ID: 21174676

I haven't looked into how the row is actually removed.  Looking now.

 

by: dtreadway7Posted on 2008-03-20 at 12:10:25ID: 21174722

No, its not row removal, I dont think. It is in the row creation using (addCurentRow()). Somehow it creates 1 row, but it is getting the row count from (row) and (rowNum) is it not?

 

by: HonorGodPosted on 2008-03-20 at 12:13:16ID: 21174746

but the table object has somehow gotten an extra row element.
That would be the reasoning why tbl.rows.length is larget than
expected.

 

by: HonorGodPosted on 2008-03-20 at 12:15:12ID: 21174764

This is why having unique id attributes for document elements is useful.
We could traverse the elements of table.rows using something like:

for ( var i = 0; i < tbl.rows.length; i++ ) {
  var row = tbl.rows[ i ];
  // Do something with each row, e.g., display "unique" row attribute value...
}

 

by: dtreadway7Posted on 2008-03-20 at 12:22:48ID: 21174847

We do have a unique row attribute value. :)

for (var i=0;i<newTRs.length;i++) {
             var theName = newTRs[i].name;
             var theID = newTRs[i].id;
                                             if (theName)
                          newTRs[i].name = theName + counter;
                                             if (theID)
                                                  newTRs[i].id = theID + counter;                  
                                                                              
      }

 

by: dtreadway7Posted on 2008-03-20 at 12:23:49ID: 21174856

SHould be a number on each one, in the NAME and ID of each row.

 

by: dtreadway7Posted on 2008-03-20 at 12:25:07ID: 21174878

at the very least the NAMES and ID's should be a unique number.

 

by: dtreadway7Posted on 2008-03-20 at 12:26:08ID: 21174889

A number that won't match the actual row index number of that too I bet.

 

by: HonorGodPosted on 2008-03-20 at 12:27:36ID: 21174910

ok, so we could have the loop be something like:

var info = '';
for ( var i = 0; i < tbl.rows.length; i++ ) {
  var row = tbl.rows[ i ];
  var name = row.getAttribute( 'name' );
  var id = row.getAttribute( 'id' );
  info += 'row[ ' + i + ']  name = "' + name + '"  id = "' + id + '"\n';
}
alert( 'Row info:\n' + info );

 

by: HonorGodPosted on 2008-03-20 at 12:29:04ID: 21174923

well, remember that the nextSuffix() that is appended to the the attribute does not
represent the actual row number.  It is a number that represents the order in which
the rows were created.

 

by: dtreadway7Posted on 2008-03-20 at 12:31:52ID: 21174970

FOUND IT!!!  We werent using the actual rows.length. Works like a champ now. :)

function addCurrentRow( obj )
 {
   counter = 0;
   var tbl = thisNode( obj, 'TABLE' );
       //var row = tbl.insertRow( -1 );   //<-- WAS  
       var row = tbl.rows.length;     //<-- CHANGED TO THIS.
   var num = rowNum( row );    
            
            if ( tbl ) {
            num = rowNum( obj ) -1;  
            var newTR= tbl.rows[1].cloneNode(true);
                        newTR.style.display = '';
      var newTRs = newTR.childNodes;

 

by: dtreadway7Posted on 2008-03-20 at 12:32:57ID: 21174977

Sneaky little... tbl.row count. ;)  

 

by: dtreadway7Posted on 2008-03-20 at 12:38:26ID: 21175035

See there HG, you made a coding MadMan!! I even already had unique ID and NAMES on the rows.

 

by: dtreadway7Posted on 2008-03-20 at 12:43:58ID: 21175085

And your right, about the row count. THe ID is that at the time of creation. Which brings me to my recurring point about the (reorder()) function. We could rewrite those guys to be the actual (row index) numbers. Especially since we arent (IDs) to find and control our row elements. We arent dependent on the iterator for that.

Means if we run (reorder) after an (addCurrent) we could always use 0 as the base rowCount for any further indexing. Not sure what that would gain us but, it seems to be mathematically symmetrical.

 

by: HonorGodPosted on 2008-03-20 at 12:57:20ID: 21175212

Well, in order to "reorder" you would/should have some criteria for ordering.

Please remember to correct the misspelling of criteria in your code.  :-)

 

by: dtreadway7Posted on 2008-03-20 at 13:07:47ID: 21175313

Thanks on the spelling, fixed.

On the criteria RE: we do, we can pass the actual row index of the row as the (reordered) value. Then all the rows ID and NAMES would match the actual row index of that row.

Wouldn't it? Maybe not...I will have to try that one. Again, I'm not sure what it would gain me. Ever have something stick in your mind as good thing, but your not sure why yet? Thats what happening. I think I got some side processes in the brain that have compiled something my upper thinking hasn't realized yet. Gotta get those guys talking to each other. Team building exercises?  :)

 

by: dtreadway7Posted on 2008-03-20 at 13:11:48ID: 21175360

Well, we would reorder() on delete and on (addCurrentRow())..... maybe (this.dTable.event.listener?) have it automagically check the order each time one fired?  
 
I dunno, feeling abstract again. :)

 

by: HonorGodPosted on 2008-03-20 at 13:18:49ID: 21175431

well, it depends upon what information you are putting in.

You know how you intend the page to be used.  I don't.  So, I can't answer that question

 

by: dtreadway7Posted on 2008-03-20 at 13:22:40ID: 21175480

brb HG. Gettin off work again. Be on in a few.

 

by: dtreadway7Posted on 2008-03-21 at 04:58:12ID: 31441752

Yo HG thanks man. I think I got it now. Thanks again for the help and passing on that knowledge. I awarded all the points I could. I'm sure I will be back on with some questions. Have a good day!  

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...