WBS - Work Breakdown Structure

**RamananKalirajan** · Mar 18 '08, 10:41 AM

Originally posted by acoder

I've merged your threads. Just one quick point: the language attribute of the script tag is deprecated, use type="text/javascript" instead.

Thankyou verymuch sir, surely I will follow it in the future.

Regards
Ramanan Kalirajan

**acoder** · Mar 18 '08, 01:22 PM

There does seem to be quite a bit of repetition in the code. Perhaps you could shorten the code, e.g. the insert cells could be converted to a function which takes the attribute parameters and sets them:
[code=javascript]oCell = row.insertCell( 0);
var el = document.create Element('input' );
el.type="text";
el.size="5";
el.value=taskno ;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;[/code]could be converted to:
[code=javascript]createCell(row, 0,"text","5",ta skno);
function createCell(row, rowno, type, size, val) {
oCell = row.insertCell( rowno);
var el = document.create Element('input' );
el.type=type;
el.size=size;
el.value=val;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;
}[/code]and repeat for the other cells.

The parts which are similar for the task and sub-tasks could be combined into one function with parameters to differentiate between the two.

**RamananKalirajan** · Mar 19 '08, 04:18 AM

Originally posted by acoder

There does seem to be quite a bit of repetition in the code. Perhaps you could shorten the code, e.g. the insert cells could be converted to a function which takes the attribute parameters and sets them:
[code=javascript]oCell = row.insertCell( 0);
var el = document.create Element('input' );
el.type="text";
el.size="5";
el.value=taskno ;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;[/code]could be converted to:
[code=javascript]createCell(row, 0,"text","5",ta skno);
function createCell(row, rowno, type, size, val) {
oCell = row.insertCell( rowno);
var el = document.create Element('input' );
el.type=type;
el.size=size;
el.value=val;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;
}[/code]and repeat for the other cells.

The parts which are similar for the task and sub-tasks could be combined into one function with parameters to differentiate between the two.

Thank You for youe suggestion sir, I will follow it.
Regards
Ramanan Kalirajan

**acoder** · Mar 19 '08, 11:09 AM

No problem, you're welcome.

**RamananKalirajan** · Mar 20 '08, 06:59 AM

My Requirement completed code, but i can't optimize the code

[HTML]<html>
<head>
<script language="javas cript">[/html]
[code=javascript]var taskno=0;
var ROW_BASE=1;
function addTask()
{
var oTable=document .getElementById ('myTable');
var lastRow = oTable.rows.len gth;
var row=oTable.inse rtRow(lastRow);

//create WBS Cell
oCell = row.insertCell( 0);
var el = document.create Element('input' );
el.type="text";
el.size="5";
taskno++;
el.value=taskno ;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;

//Task Name
oCell = row.insertCell( 1);
var el1 = document.create Element('input' );
el1.type="text" ;
el1.size="25";
oCell.appendChi ld(el1);
oCell.innerHTML =oCell.innerHTM L;

//Adding SubTask
oCell = row.insertCell( 2);
var el2 = document.create Element('input' );
el2.type="butto n";
el2.value="Sub Task";
el2.onclick="ad dSubTask(this)" ;
oCell.appendChi ld(el2);
oCell.innerHTML =oCell.innerHTM L;

//Remove Button
oCell = row.insertCell( 3);
var el3 = document.create Element('input' );
el3.type="butto n";
el3.value="Remo ve";
el3.onclick="re moveThis(this)" ;
oCell.appendChi ld(el3);
oCell.innerHTML =oCell.innerHTM L;

//Resource
oCell = row.insertCell( 4);
var el4 = document.create Element('input' );
el4.type="text" ;
oCell.appendChi ld(el4);
oCell.innerHTML =oCell.innerHTM L;

//Start Date
oCell = row.insertCell( 5);
var el5 = document.create Element('input' );
el5.type="text" ;
oCell.appendChi ld(el5);
oCell.innerHTML =oCell.innerHTM L;

//End Date
oCell = row.insertCell( 6);
var el6 = document.create Element('input' );
el6.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;

//Total Hrs
oCell = row.insertCell( 7);
var el7 = document.create Element('input' );
el7.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;
}
function addSubTask(rowe l)
{
var temp;
var insert;
var subRow = rowel.parentNod e.parentNode;
var tbl = subRow.parentNo de.parentNode;
var ri = subRow.sectionR owIndex;
var nval = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
var x=ri+1;
var nval1;
if(ri==(documen t.getElementByI d('myTable').ro ws.length-1))
{
nval1 = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
}
else
{
nval1 = tbl.tBodies[0].rows[x].cells[0].firstChild.val ue;
}
var str=nval1+"";
flag="TRUE";
if(str.indexOf( ".")==-1)
{
var subtaskno=1;
temp =nval+"."+subta skno;
insert=ri+1;
}
else
{
while(flag=="TR UE")
{
ri=ri+1;
if(ri==(documen t.getElementByI d('myTable').ro ws.length))
{
nval1 = tbl.tBodies[0].rows[ri-1].cells[0].firstChild.val ue;
flag="FALSE";
ri=ri-1;
str = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
subtaskno=str.s ubstring (str.lastIndexO f (".")+1, str.length);
var stask = parseInt(subtas kno);
stask=stask+1;
temp =nval+"."+stask ;
}
else
{
nval1 = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
}
var str=nval1+"";
if(str.indexOf( ".")==-1)
{
flag="FALSE";
ri=ri-1;
str = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
subtaskno=str.s ubstring (str.lastIndexO f (".")+1, str.length);
var stask = parseInt(subtas kno);
stask=stask+1;
temp =nval+"."+stask ;
}
else
{
flag=="TRUE" ;
}
}
insert=ri+1;
}

var oTable=document .getElementById ('myTable');
var row=oTable.inse rtRow(insert);

//create WBS Cell
oCell = row.insertCell( 0);
var el = document.create Element('input' );
el.type="text";
el.size="5";
el.value=temp;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;

//Task Name
oCell = row.insertCell( 1);
var el1 = document.create Element('input' );
el1.type="text" ;
el1.size="25";
oCell.appendChi ld(el1);
oCell.innerHTML =oCell.innerHTM L;

//Adding SubSubTask
oCell = row.insertCell( 2);
var el2 = document.create Element('input' );
el2.type="butto n";
el2.value="Sub Sub Task";
el2.onclick="cr eateSubSubTask( this)";
oCell.appendChi ld(el2);
oCell.innerHTML =oCell.innerHTM L;

//Remove Button
oCell = row.insertCell( 3);
var el3 = document.create Element('input' );
el3.type="butto n";
el3.value="Remo ve";
el3.onclick="re moveThis(this)" ;
oCell.appendChi ld(el3);
oCell.innerHTML =oCell.innerHTM L;

//Resource
oCell = row.insertCell( 4);
var el4 = document.create Element('input' );
el4.type="text" ;
oCell.appendChi ld(el4);
oCell.innerHTML =oCell.innerHTM L;

//Start Date
oCell = row.insertCell( 5);
var el5 = document.create Element('input' );
el5.type="text" ;
oCell.appendChi ld(el5);
oCell.innerHTML =oCell.innerHTM L;

//End Date
oCell = row.insertCell( 6);
var el6 = document.create Element('input' );
el6.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;

//Total Hrs
oCell = row.insertCell( 7);
var el7 = document.create Element('input' );
el7.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;
}[/code]

[code=javascript]// Function for creating Sub Sub Task

function createSubSubTas k(rowel)
{
var temp;
var insert;
var subRow = rowel.parentNod e.parentNode;
var tbl = subRow.parentNo de.parentNode;
var ri = subRow.sectionR owIndex;
var nval = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
var x=ri+1;
var nval1;
if(ri==(documen t.getElementByI d('myTable').ro ws.length-1))
{
nval1 = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
}
else
{
nval1 = tbl.tBodies[0].rows[x].cells[0].firstChild.val ue;
}
var str=nval1+"";
flag="TRUE";
if(str.lastInde xOf(".")==1)
{
var subsubtaskno=1;
temp =nval+"."+subsu btaskno;
insert=ri+1;
}
else
{
if(str.lastInde xOf(".")==-1)
{
subsubtaskno=1;
temp =nval+"."+subsu btaskno;
insert=ri+1;
}
else
{
while(flag=="TR UE")
{
ri=ri+1;
if(ri==(documen t.getElementByI d('myTable').ro ws.length))
{
flag="FALSE";
}
else
{
var check=tbl.tBodi es[0].rows[ri].cells[0].firstChild.val ue
str = check+"";
if(str.lastInde xOf(".")==-1)
{
nval1 = tbl.tBodies[0].rows[ri-1].cells[0].firstChild.val ue;
flag="FALSE";
ri=ri-1;
str = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
subsubtaskno=st r.substring (str.lastIndexO f (".")+1, str.length);
var stask = parseInt(subsub taskno);
stask=stask+1;
temp =nval+"."+stask ;
}
else
{
flag="TRUE";
}
}
if(ri==(documen t.getElementByI d('myTable').ro ws.length))
{
nval1 = tbl.tBodies[0].rows[ri-1].cells[0].firstChild.val ue;
flag="FALSE";
ri=ri-1;
str = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
subsubtaskno=st r.substring (str.lastIndexO f (".")+1, str.length);
var stask = parseInt(subsub taskno);
stask=stask+1;
temp =nval+"."+stask ;
}
else
{
nval1 = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
}
var str=nval1+"";
if(str.lastInde xOf(".")==1)
{
flag="FALSE";
ri=ri-1;
str = tbl.tBodies[0].rows[ri].cells[0].firstChild.val ue;
subsubtaskno=st r.substring (str.lastIndexO f (".")+1, str.length);
var stask = parseInt(subsub taskno);
stask=stask+1;
temp =nval+"."+stask ;
}
else
{
flag=="TRUE" ;
}
}
}
insert=ri+1;
}

var oTable=document .getElementById ('myTable');
var row=oTable.inse rtRow(insert);

//create WBS Cell
oCell = row.insertCell( 0);
var el = document.create Element('input' );
el.type="text";
el.size="5";
el.value=temp;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;

//Task Name
oCell = row.insertCell( 1);
var el1 = document.create Element('input' );
el1.type="text" ;
el1.size="25";
oCell.appendChi ld(el1);
oCell.innerHTML =oCell.innerHTM L;

//Adding SubTask
oCell = row.insertCell( 2);
var el2 = document.create Element('nbsp') ;
oCell.appendChi ld(el2);
oCell.innerHTML =oCell.innerHTM L;

//Remove Button
oCell = row.insertCell( 3);
var el3 = document.create Element('input' );
el3.type="butto n";
el3.value="Remo ve";
el3.onclick="re moveThis(this)" ;
oCell.appendChi ld(el3);
oCell.innerHTML =oCell.innerHTM L;

//Resource
oCell = row.insertCell( 4);
var el4 = document.create Element('input' );
el4.type="text" ;
oCell.appendChi ld(el4);
oCell.innerHTML =oCell.innerHTM L;

//Start Date
oCell = row.insertCell( 5);
var el5 = document.create Element('input' );
el5.type="text" ;
oCell.appendChi ld(el5);
oCell.innerHTML =oCell.innerHTM L;

//End Date
oCell = row.insertCell( 6);
var el6 = document.create Element('input' );
el6.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;

//Total Hrs
oCell = row.insertCell( 7);
var el7 = document.create Element('input' );
el7.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;
}

// End of Sub Sub Task Creation[/code]

[code=javascript]function removeThis(rowe l)
{
var delRow = rowel.parentNod e.parentNode;
var tbl = delRow.parentNo de.parentNode;
var rIndex = delRow.sectionR owIndex;
var nval = tbl.tBodies[0].rows[rIndex].cells[0].firstChild.val ue;
var str=nval;
if(str.indexOf( ".")==-1)
{
document.getEle mentById('myTab le').deleteRow( rIndex);
taskno--;
var flag="TRUE";
while(flag=="TR UE")
{
if(rIndex<docum ent.getElementB yId('myTable'). rows.length)
{
var nval = tbl.tBodies[0].rows[rIndex].cells[0].firstChild.val ue;
var str=nval;
if(str.indexOf( ".")==-1)
{
flag="FALSE";
}
else
{
if(rIndex==docu ment.getElement ById('myTable') .rows.length)
{
flag=="FALSE";
}
document.getEle mentById('myTab le').deleteRow( rIndex);
}
}
else
{
flag="FALSE";
}
}
reorder();
}
else if(str.lastInde xOf(".")==1)
{
document.getEle mentById('myTab le').deleteRow( rIndex);
var flag="TRUE";
var nval = tbl.tBodies[0].rows[rIndex].cells[0].firstChild.val ue;
var str=nval+"";
if(str.indexOf( ".")==-1)
{
flag="FALSE";
}
while(flag=="TR UE")
{
if(rIndex<docum ent.getElementB yId('myTable'). rows.length)
{
var nval = tbl.tBodies[0].rows[rIndex].cells[0].firstChild.val ue;
var str=nval+"";
if(str.indexOf( ".")==-1)
flag="FALSE";
if(str.lastInde xOf(".")==1)
{
flag="FALSE";
}
else
{
if(rIndex==docu ment.getElement ById('myTable') .rows.length)
{
flag=="FALSE";
}
document.getEle mentById('myTab le').deleteRow( rIndex);
}
}
else
{
flag="FALSE";
}
}
reorder();
}
else
{
document.getEle mentById('myTab le').deleteRow( rIndex);
reorder();
}
reorder();
}
var lastValue;
function reorder()
{
var len=document.ge tElementById('m yTable').rows.l ength;
var tbl = document.getEle mentById('myTab le');
i=0;
if(len>1)
{
tbl.tBodies[0].rows[1].cells[0].firstChild.val ue=1;
lastValue=tbl.t Bodies[0].rows[1].cells[0].firstChild.val ue;
}
var taskno=0;
var staskno=0;
var subtaskno=0;
i=2;
while(i<len)
{
var x = tbl.tBodies[0].rows[i].cells[0].firstChild.val ue;
var y= x+"";
if(y.indexOf(". ")==-1)
{
lastValue=parse Int(lastValue)+ 1;
tbl.tBodies[0].rows[i].cells[0].firstChild.val ue=lastValue;
lastValue= tbl.tBodies[0].rows[i].cells[0].firstChild.val ue;
taskno=0;
}
else if(y.lastIndexO f(".")==1)
{
taskno=taskno+1 ;
var staskno = lastValue+"."+t askno;
tbl.tBodies[0].rows[i].cells[0].firstChild.val ue=staskno;
subtaskno=0;
}
else
{
subtaskno=subta skno+1;
var temp = staskno+"."+sub taskno;
tbl.tBodies[0].rows[i].cells[0].firstChild.val ue=temp;
}
i=i+1;
}

}[/code]
[html]</script>
</head>
<body>
<br/>
<input type="button" value="Add Task" onclick="addTas k()">
<br/>
<br/>
<table id='myTable'>
<tr>
<th>WBS</th>
<th>Task Name</th>
<th></th>
<th></th>
<th>Resource</th>
<th>Start Date</th>
<th>End Date</th>
<th>Total Hrs.</th>
</tr>
</table>
</body>
</html> [/HTML]

People who are in need of the WBS working code can use it, and modify it for their need.

Regards
Ramanan Kalirajan

**acoder** · Mar 20 '08, 12:40 PM

For example, the following:[code=javascript]
function addTask()
{
var oTable=document .getElementById ('myTable');
var lastRow = oTable.rows.len gth;
var row=oTable.inse rtRow(lastRow);

//create WBS Cell
oCell = row.insertCell( 0);
var el = document.create Element('input' );
el.type="text";
el.size="5";
taskno++;
el.value=taskno ;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;

//Task Name
oCell = row.insertCell( 1);
var el1 = document.create Element('input' );
el1.type="text" ;
el1.size="25";
oCell.appendChi ld(el1);
oCell.innerHTML =oCell.innerHTM L;

//Adding SubTask
oCell = row.insertCell( 2);
var el2 = document.create Element('input' );
el2.type="butto n";
el2.value="Sub Task";
el2.onclick="ad dSubTask(this)" ;
oCell.appendChi ld(el2);
oCell.innerHTML =oCell.innerHTM L;

//Remove Button
oCell = row.insertCell( 3);
var el3 = document.create Element('input' );
el3.type="butto n";
el3.value="Remo ve";
el3.onclick="re moveThis(this)" ;
oCell.appendChi ld(el3);
oCell.innerHTML =oCell.innerHTM L;

//Resource
oCell = row.insertCell( 4);
var el4 = document.create Element('input' );
el4.type="text" ;
oCell.appendChi ld(el4);
oCell.innerHTML =oCell.innerHTM L;

//Start Date
oCell = row.insertCell( 5);
var el5 = document.create Element('input' );
el5.type="text" ;
oCell.appendChi ld(el5);
oCell.innerHTML =oCell.innerHTM L;

//End Date
oCell = row.insertCell( 6);
var el6 = document.create Element('input' );
el6.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;

//Total Hrs
oCell = row.insertCell( 7);
var el7 = document.create Element('input' );
el7.type="text" ;
oCell.appendChi ld(el6);
oCell.innerHTML =oCell.innerHTM L;
}[/code] could be converted to:
[code=javascript]function createCell(row, rowno, type, size, val, onc) {
oCell = row.insertCell( rowno);
var el = document.create Element('input' );
el.type=type;
if (size) el.size=size;
el.value=val;
if (onc) el.onclick = onc;
oCell.appendChi ld(el);
oCell.innerHTML =oCell.innerHTM L;
}
function addTask()
{
var oTable=document .getElementById ('myTable');
var lastRow = oTable.rows.len gth;
var row=oTable.inse rtRow(lastRow);

//create WBS Cell
createCell(row, 0,"text","5",ta skno);
//Task Name
createCell(row, 1,"text","25"," ");
//Adding SubTask
createCell(row, 2,"button",null ,"Add Sub task","removeTh is(this)");
//...and so on...
}[/code]I've not tested this, but it gives you an idea.

**RamananKalirajan** · Mar 20 '08, 12:47 PM

By tomorrow I am finishing this project. Surely I will try in this method what you had suggested now, Thank you Sir. Really this forum is helpful for me to develop my skills.

Regards
Ramanan Kalirajan

**acoder** · Mar 20 '08, 05:02 PM

You're welcome. I'm glad it is.

WBS - Work Breakdown Structure

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment