December 2, 2008 02:05am pst

03.14.2008 at 11:31AM PDT, ID: 23242618

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.6

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

Asked by dtreadway7 in Dynamic HTML (DHTML), JavaScript, Scripting Languages

Tags: Javascript, FF, IE6, IE7, Safari

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.Start Free Trial

         
           
             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:

           
           
             <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>
           
         

Keywords: Dynamic Table Creation in Javascript -…

	Title
1	Toggle Div script not working
2	toggle 2 images with Javascript
3	toggle visibility between two divisions
4	fireEvent('onChange') in FireFox
5	Change checkbox text onchange with j…
6	vba interacting with HTMLselectelemen…

Loading Advertisement...