JavaScript - Need Help Adding Rows

My table had the following layout.
Code:

<table>
<tr>
<td rowspan='2'><td>
<td>Data</td><td>Data</td><td>Data</td> 
</tr>
<tr>
<td>Data</td><td>Data</td><td>Data</td> 
</tr>
</table>

After clicking an add rows button, the two rows are cloned and appended as follows with a checkbox added as shown.
Code:

<table>
<td rowspan='2'><td>
<td>Data</td><td>Data</td><td>Data</td> 
</tr>
<tr>
<td>Data</td><td>Data</td><td>Data</td> 
</tr>
<tr>
<td rowspan='2'><input type='checkbox' name='check'><td>
<td>Data</td><td>Data</td><td>Data</td> 
</tr>
<tr>
<td>Data</td><td>Data</td><td>Data</td> 
</tr>
</table>

I want to be able to delete rows 3&4 by selecting the checkbox in row 3 and clicking a delete rows button. Regardless of how many sets of rows have been previously added, any set of rows can be deleted by selecting the appropriate checkbox(es) and clicking delete button. I'm trying to figure out how this can be done. My thinking is if checkbox is checked, calculate row index. I would then have to call deleteRow twice on that row index. Is there a better way of doing this?

My table starts like this:
Code:

<table>
<tr>
<td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td>Data</td><td>Data</td><td>Data</td>
</tr>
</table>

When an addRows button is clicked, the first two rows are copied (cloned), a checbox is then inserted into the row1 cell1, then the two rows are appended:
<table>
<tr>
<td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td rowspan='2'><input type='checkbox' name='check[]'></td><td>Data</td><td>Data</td><td>Data</td>
</tr>
<tr>
<td>Data</td><td>Data</td><td>Data</td>
</tr>
</table>
Rows,except the first two can then be deleted by selecting the appropriate checkbox and clicking a deleteRow button. The check[] only exists after the first two rows have been copied and appended, so undefined means only two rows exist. Having a problem with the while loop. If a browser sees the next sibling of a tr as a td, the the loop should force the browser to go to the next sibling until its a tr, i.e row4. But its causing my browser(FF) to become unresponsive.
Code:

function deleteRow()
{
if(check == 'undefined')
{
return;
}
else			
{
var check = document.getElementsByName('check[]'),row,nextRow,x;
var len = check.length;
for(x=len-1; x>=0; x--)
{
if(check[x].checked)
{
row = check[x].parentNode.parentNode;
while(row.nextSibling.nodeName != 'tr')
{
nextRow = row.nextSibling;
}
nextRow = row.nextSibling;
alert('ok');
}
}
}
}

Appreciate ans help with this?

The code so far works, but the rows form horizontally rather than vertically. This is my first time working with XMLHttpRequest() so it's probably pretty sloppy. Also, when the function runs again, it creates another row above the previous row, I'll add a screen shot.

http://tinyurl.com/7c7fylb - What it looks like when I've typed "bloodb" which means everything after the return if statement has ran twice

Code:

function findCard()
{
str = document.getElementById("cardName").value;
if (str.length<=4)
  {
  return;
  }
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","CardInfo/cards.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var strLng = str.length;
var x = xmlDoc.getElementsByTagName("card");
var table = document.getElementById("cardDisplay")
var newRow = table.insertRow(0)

for (i=0; i  {
   var resaultStr = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue.slice(0,strLng)
   if (str==resaultStr)
   {
    newRow.insertCell(0).innerHTML=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
   }

   
  }

}

I've got this JavaScript code that is doing stuff to the content of
<TR> rows.. but it's overselecting and I need to filter the <TR>s it selects in the bold line.

var theRows = document.getElementsByTagName("TR");
var r = 0;
var strTitle = "";
while (r < theRows.length)
{ try
{ strTitle = theRows[r].innerText || theRows[r].textContent;
strTitle = strTitle.replace(/\n|\r|\t|\^ /g,"");
if (strTitle.substring(0,1) == "(") {
if (strTitle.indexOf("STAT") == -1)
{
theRows[r].style.display = "none";
... continues


Below is the rendered html. What I really want to do instead of


if (strTitle.substring(0,1) == "(")


Is only perform the operation when a row that is using class="ms-
formlabel, or maybe has a FieldInternalName. I understand that
strTitle is just pulling content, so how do I condition on other
properties or strings within the <TR> row given my currently logic?


Rendered HTML.


<TR>
<TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3
class="ms-standardheader">
<nobr>1. Do you become short of breath or develop chest pain when
climbing a flight of stairs?</nobr>
</H3></TD>
<TD valign="top" class="ms-formbody" width="400px">
<!-- FieldName="1. Do you become short of breath or develop chest pain
when climbing a flight of stairs?"
FieldInternalName="ShortofBreath"
FieldType="SPFieldBoolean"
-->
<span dir="none">


Thanks for any help or information!

have created dynamic table with two columns
for ex:first column is Income column
and second column is tax from Income
at the third column are different percent options
for ex. I wrote first column 1000 and chose from third drop down box 10%
I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100
here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users
thanks beforehand
here si code

Code:

<html><head><title>dinamik sheet</title>
 
<script> 
function addrow(){
 
var tbl=document.getElementById('sheet');
var lastrow=tbl.rows.length;
var iteration=lastrow;
var row=tbl.insertRow(lastrow);
var cellLeft=row.insertCell(0);
var textNode=document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight=row.insertCell(1);
var el=document.createElement('input');
el.type='text';
el.name='txtRow'+iteration;
el.size=40;
el.setAttribute('sumMe',"1");
el.onBlur=sum;
 
 
cellRight.appendChild(el);
 
var cellRight2=row.insertCell(2);
var el1=document.createElement('input');
el1.type='text';
el1.name='txtRowe'+iteration;
el1.id='txtRowe'+iteration;
el1.size=40;
el1.setAttribute('sumMe',"1");
 
cellRight2.appendChild(el1);
 
 
 
 
 
var cellRightsel=row.insertCell(3);
var sel=document.createElement('select');
sel.name='selRow'+iteration;
sel.options[0]=new Option('10%','value="10"');
sel.options[1]=new Option('20%','value="20"');
sel.options[2]=new Option('30%','value="30"');
cellRightsel.appendChild(sel);
var cellRightsel2=row.insertCell(4);
 
}
</script>
<script> 
function sum(){	
var form=document.getElementById('eval_edit');
	if(!form) return;
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){
		var el = form['txtRow'+i];
		if(!el) continue;
		var txt = el.value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		var el2 = form['selRow'+i];
		var el3 = document.getElementById('txtRowe'+i);
		if(!el2 || !el3) alert('Error in calculating totals');
		var percent = Number(el2[el2.selectedIndex].value)/100;
		var tax = Number(txt) * percent;
		el3.innerHTML = tax.toFixed(2);
 
		s1 += Number(txt);
		s2 += tax;
	}
	if(form['total']){ form['total'].value = s1.toFixed(2); }
	if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
}
 
 
onload = function(){
sum();
}
 
</script>
</head>
<body>
<form name="eval_edit" method="POST">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr><td align="center">
<table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
<tr><td>1</td>
<td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
<td><select name="selRow0">
<option value="value="10">10%</option>
<option value="value="20">20%</option>
<option value="value="30">30%</option></select></td></tr></table>
INCOME SUM<input name="total" type="text"/>
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRow()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
</td> 
</tr> 
</table> 
</form> 
 
</body> 
 
</html>

I am trying to select multiple <tr>'s (onclick) in a <table> and then move every selected <tr> to another location in the table (on click).

I will also be adding functionality to delete specific rows from a table by clicking on a <td> element, though I've already done this by doing.

document.getElementById("container").deleteRow(row.parentNode.rowIndex);

I am just completely unsure of how to tackle storing each selected row -- and then moving each selected row elsewhere in the table. I've seen many examples that accomplish close to what I am trying to acheive, however, they are all done via drag and drop and do not allow selecting multiple rows.

Hey guys,

I have a table which contains a link to add rows in each row after the header. This link, when clicked, adds a row beneath the row which contained the clicked link. This part works perfectly.

However the added rows each have a link to remove themselves from the table, and this is the part which isn't working properly. What's supposed to happen is that you click on a link, and then the row which contains the link you just clicked on is deleted.

What's actually happening is when the "remove" links are clicked, first the row 2 rows above it is removed, then the row directly above it, then the correct row (itself) is deleted.

Hope all of that makes sense!

This is my script:
Code:

function addRowToTable(thisRow)
{
  var tbl = document.getElementById('foodsTable');
   addedRow = thisRow + addedRows;
  var row = tbl.insertRow(addedRow);
  row.id = addedRows;
  addedRows = addedRows + 1; 

  var cellLeft = row.insertCell(0);
  cellLeft.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+&nbsp;<input type='text'>&nbsp; <a href='JavaScript:removeRowFromTable(" + row.id + ")'>Remove</a> ";

  var cellMiddle = row.insertCell(1);
  cellMiddle.innerHTML = "<input type='text'>";

  var cellRight = row.insertCell(2);
  cellRight.innerHTML = "text here";
}

 function removeRowFromTable(i)
{
  var tbl = document.getElementById('foodsTable');
  document.getElementById('foodsTable').deleteRow(i)
  addedRows = addedRows - 1;
} 

And this is my table:
Code:

<table width=100% id="foodsTable">
	<tr bgcolor="#EEEEEE">
		<td width=*><b>Food/Drink</b></td>
		<td align="right" width=100><b>Purchased</b></td>
		<td align="right" width=100><b>Produced</b></td>
		<td width=60></td>
	</tr>
	<tr>
		<td><a href="itemdetails.php?item=Apples" onMouseover="ddrivetip('<?php getToolTipData('Apples',$Foods); ?>')"; onMouseout="hideddrivetip()">Apples</a>
		&nbsp; <a href="JavaScript:addRowToTable(2)">+ Add similar food</a> 
		&nbsp;<font color="#FF0000">*NEW*</font></td>
		<td align="right"><input type="text" name="Apples" maxlength="10" size="10" value="<?php echo $session->foodsApplesPurc; ?>" style="text-align:right" /></td>
		<td align="right"><input type="text" name="ApplesProd" maxlength="10" size="10" value="<?php echo $session->foodsApplesProd; ?>" style="text-align:right" /></td>
		<td>kg/week</td>
	</tr>
	<!-- many more rows just like the one above /-->
</table>

I've highlighted the sections which I believe are most likely to be the source of my problems. Please ignore the PHP and mouseover/mouseout parts - I don't think they're relevant to this particular problem. I'm also not bothered at this stage by the fact that I'm not adding enough cells to the new rows - I'll fix this later. At this stage I just want to get the "remove" links to remove their own rows.

Any ideas? Knowing me it's most likely a case of me making it way more complicated than it needs to be, and digging myself into a hole! I will be eternally indebted to anyone who can give me any help!

Thanks in advance!

I have a HTML table with 800 rows. How can I delete rows that has no Activity & no $ in JavaScript(Orange Colored Rows)? Please note I can have 1 or more than 1 assessments with 1 or more than 1 activity. Sample data.

Name Address Assessment Activity $
Bela Toronto First Assesment Activity 1 10
Asif Toronto First Assesment
Asif Toronto First Assesment Activity 1 10
Asif Toronto First Assesment Activity 2 10
Asif Toronto First Assesment Activity 3 20
Asif Toronto First Assesment Activity 4 30
Asif Toronto Second Assesment
Asif Toronto Second Assesment Activity 1 10
Asif Toronto Second Assesment Activity 2 10
Asif Toronto Second Assesment Activity 3 10
Akhtar Toronto First Assesment
Akhtar Toronto First Assesment Activity 1 20
Akhtar Toronto First Assesment Activity 2 30
Akhtar Toronto First Assesment Activity 3 10
Akhtar Toronto First Assesment Activity 4 10
Akhtar Toronto First Assesment Activity 5 10

I have written code for adding and removing dynamic rows.i am using same file for both ADD

and MODIFY operations.this page is working for ADD operation.

lets say for MODIFY operation one employee has added 3 rows and i need to display those rows
and user can edit thoese rows and finally these values will be submitted to database.

problem is coming in modifyRow() method.how to accomodate array values in the dynamic rows
in modifyRow() method.Please review the code in that method?while loading the values the

structure should be same as addRow() method?

Code:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>

  var enoArray = new Array("122","123","124");


var enameArray = new Array(3)
enameArray[0] = "Mike"
enameArray[1] = "Soleman"
enameArray[2] = "Kick"

var salArray = new Array(3)
salArray[0] = "100"
salArray[1] = "200"
salArray[2] = "300"

enoArray.sort();

function addRow()
{
     tbl=document.getElementById('showTable');
  var lastRow = tbl.rows.length;


 
   var row = tbl.insertRow(lastRow);
   var iteration = lastRow;
  
    var cellremoveRow = row.insertCell(0);
    cellremoveRow.innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";


	
  var cellSno = row.insertCell(1);
  cellSno.innerHTML=iteration;


  var cellEmpno = row.insertCell(2);
  cellEmpno.innerHTML="<input type='text' name='empno'  value=''>";



  var cellEname = row.insertCell(3);
  cellEname.innerHTML="<input type='text' name='ename'  value=''>";

  var cellSal = row.insertCell(4);
  cellSal.innerHTML="<input type='text' name='sal'  value=''>";



  var cellAddRow = row.insertCell(5);
 
 for(var i = 0; i < lastRow; i++)
    {
        tbl.rows[i].cells[5].innerHTML = '';
    }
    cellAddRow.innerHTML="<input type='button' value='AddRow' onClick='addRow();'>"; 


 
}

  function removeRow(theRow){
 
  var tab=document.getElementById('showTable');
  index= theRow.parentNode.parentNode.rowIndex;
   var lastRow = tab.rows.length;
  tab.deleteRow(index);
 
  for(i=1;i<tab.rows.length;i++)
  {
   tab.rows[i].cells[1].innerHTML=i;
  }
 
        tab.rows[lastRow-2].cells[5].innerHTML ="<input type='button' value='AddRow' 

onClick='addRow();'>";
    
 
 
}

function modifyRow()
{
var tab=document.getElementById('showTable');
 var lastRow = tab.rows.length;
alert(enoArray.length)

 for(i=0;i<enoArray.length;i++)
{
var row = tab.insertRow();
var cell =row.insertCell();

tab.rows[i].cells[0].innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";
tab.rows[i].cells[2].innerHTML= "<input type='text' name='empno'  value='"+enoArray[i]+"'>"  

;
tab.rows[i].cells[3].innerHTML= "<input type='text' name='empno'  

value='"+enameArray[i]+"'>"  ;
tab.rows[i].cells[4].innerHTML= "<input type='text' name='empno'  value='"+salArray[i]+"'>"  

;
  }




}


</script>
</HEAD>
<BODY onload="modifyRow()">
<table id='showTable' border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>EmpNo</td>
<td>Name</td>
<td>Sal</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td><input type='text' name='empno' value='' ></td>
<td><input type='text' name='ename' value='' ></td>
<td><input type='text' name='sal' value='' ></td>
<td><input type='button' value='AddRow' onClick='addRow();'> </td>
</tr>
</table>
</BODY>
</HTML>

I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable.

I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx

FROM JAVASCRIPTTOOLBOX

A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.
The only requirements a

1. Put a class of "parent" on each parent row (tr)
2. Give each parent row (tr) an id
3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs

Original code:

Code:

$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});

This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing.

My code now looks like this:

Code:

$(document).ready(function() {
	$('tr:not(.parent)').hide();
	
	//$('tr.parent')
	$('.arrow')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
			$(this).toggleClass("up");
		});
	});

So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me?

Thanks

I could use some help getting the following code to work... As is, it works fine in google chrome, but not at all in Internet Explorer 9. If I paste my code into w3schools "tryit" window, it will work great if it has less than 6 rows, any more and I get a generic "ERROR" on the screen.

javascript code
Code:

<script type="text/javascript">
Number.prototype.formatMoney = function(c, d, t){
var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };
    function getRowCount()
    {
        return document.getElementById('myTable').rows.length;
    }
function changeContent()
{
var lastRow = getRowCount();
var colSum=0;
for(var e=1;e<=lastRow;e++){
        var x=document.getElementById('myTable').rows[e].cells;
        p1=document.getElementById('p'+e).value;
        q1=document.getElementById('q'+e).value;
        outint = p1*q1;
        var out='<input type="text" value="'+Number(outint).formatMoney(2, '.', ',')+'" disabled="disabled">';
        x[3].innerHTML=out;
}
}
</script>

html code
Code:

<table width="600" border="1">
<tr>
<td>Item Name</td>
<td>Price per unit</td>
<td>Number of Units</td>
<td>Total Price</td>
</tr>

<tr>
<td>Item 1</td>
<td><input type="text" id="p1" value="8.3930" disabled="disabled"></td>
<td><input type="text" id="q1" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t1" value="0" disabled="disabled"></td>
</tr>
<tr>
<td>Item 2</td>
<td><input type="text" id="p2" value="8.3380" disabled="disabled"></td>
<td><input type="text" id="q2" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t2" value="0" disabled="disabled"></td>
</tr>
<tr>
<td>Item 3</td>
<td><input type="text" id="p3" value="62.3260" disabled="disabled"></td>
<td><input type="text" id="q3" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t3" value="0" disabled="disabled"></td></tr>
<tr>
<td>Item 4</td>
<td><input type="text" id="p4" value="124.6630" disabled="disabled"></td>
<td><input type="text" id="q4" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t4" value="0" disabled="disabled"></td></tr>
<tr>
<td>Item 5</td>
<td><input type="text" id="p5" value="1554.4320" disabled="disabled"></td>
<td><input type="text" id="q5" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t5" value="0" disabled="disabled"></td>
</tr>
<tr>
<td>Item 6</td>
<td><input type="text" id="p6" value="2622.6750" disabled="disabled"></td>
<td><input type="text" id="q6" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t6" value="0" disabled="disabled"></td></tr>
<tr>
<td>Item 7</td>
<td><input type="text" id="p7" value="4748.8650" disabled="disabled"></td>
<td><input type="text" id="q7" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t7" value="0" disabled="disabled"></td>
</tr>
<tr>
<td>Item 8</td>
<td><input type="text" id="p8" value="23087.9330" disabled="disabled"></td>
<td><input type="text" id="q8" value="0" onchange="changeContent()"></td>
<td><input type="text" id="t8" value="0" disabled="disabled"></td>
</tr>
</table>

*note* the html table is actually made from a php loop pulling items from a database, but for the sake of simpler troubleshooting I made it a static table for posting here.

Please help if you can.

Thanks

The below javascript code only displays table rows in class ms-formlabel that contain (AP) in the text. It works great.

However, I also need it to also insert a new row right above any rows that also contains (H: and in the detail of that new row, I need the string following the H:

So a table row with (AP)(H:Sleepless), would insert a row right above that row as follows

Code:

<TR><TD>Sleepless</TD></TR>

possible?

Thanks for any help!


Code:

<script type="text/javascript">
var theRows = document.getElementsByTagName("TR");
var r = 0;
var strTitle = "";
while (r < theRows.length)
{ try
{ strTitle = theRows[r].innerText || theRows[r].textContent;
strTitle = strTitle.replace(/\n|\r|\t|\^ /g,"");
var row = theRows[r], 
cells = row.getElementsByTagName('td'); 
if (cells[0].className.indexOf('ms-formlabel') > -1) 
{
if (strTitle.indexOf("(AP)") == -1)
{
theRows[r].style.display = "none"; 
}
else
{
theRows[r].cells[0].innerHTML = theRows[r].cells[0].innerHTML.replace("(AP)","");
}
}

}catch(err){}r+=1;
}
</script>

hi
I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased.
it sum but not like integer
for ex. in row1 i enter 20 and in row2 i enter 5
it sums like 205 but i need it sums like 25
if possible pls help me
Thanks beforehand
here is code



Code:

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
 
 
function addRow() 
{ 
// grab the element, i.e. the table your editing, in this we're calling it 
// 'mySampleTable' and it is reffered to in the table further down on the page 
// with a unique of id of you guessed it, 'mySampleTable' 
var tbl = document.getElementById('mySampleTable'); 
// grab how many rows are in the table 
var lastRow = tbl.rows.length; 
 
// if there's no header row in the table (there should be, code at least one 
//manually!), then iteration = lastRow + 1 
var iteration = lastRow; 
// creates a new row 
var row = tbl.insertRow(lastRow); 
 
// left cell 
// insert a cell 
var cellLeft = row.insertCell(0); 
// here we're just using numbering the cell, like anything else you don't 
// have to use this, but i've kinda noticed users tend to like them 
var textNode = document.createTextNode(iteration); 
// takes what we did (create the plain text number) and appends it the cell 
// we created in the row we created. NEAT! 
cellLeft.appendChild(textNode); 
 
// right cell 
// another cell! 
var cellRight = row.insertCell(1); 
// creating an element this time, specifically an input 
var el = document.createElement('input'); 
// a data type of text 
el.type = 'text'; 
// the name of the element txtRow, and because this is dynamic we also 
// append the row number to it, so for example if this is the eigth row 
// being created the text box will have the name of txtRow8. super fantastic. 
el.name = 'txtRow' + iteration; 
// the exact same thing with a unique id 
el.id = 'txtRow' + iteration; 
// set it to size of 40. setting sizes is good. 
el.size = 40; 
el.rel = 'sum';
 
// same thing as earlier, append our element to our freshly and clean cell 
cellRight.appendChild(el); 
 
// select cell 
// our last cell! 
var cellRightSel = row.insertCell(2); 
// create another element, this time a select box 
var sel = document.createElement('select'); 
// name it, once again with an iteration (selRow8 using the example above) 
sel.name = 'selRow' + iteration; 
// crates options in an array 
// the Option() function takes the first parameter of what is being displayed 
// from within the drop down, and the second parameter of the value it is carrying over 
sel.options[0] = new Option('text zero', 'value0'); 
sel.options[1] = new Option('text one', 'value1'); 
sel.options[2] = new Option('text two', 'value2'); 
// append our new element containing new options to our new cell 
cellRightSel.appendChild(sel); 
} 
 
function removeRow() 
{ 
// grab the element again! 
var tbl = document.getElementById('mySampleTable'); 
// grab the length! 
var lastRow = tbl.rows.length; 
// delete the last row if there is more than one row! 
if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
 
</script> 
 
<script type="text/javascript"> 
function sum() {
   var elem = document.getElementById('eval_edit').elements;
 
   // loop fields in form
   for (var i = 0; i < elem.length; i++) {
      // check if field has attribute 'rel' with value of 'sum'
      if (elem[i].getAttribute('rel') == 'sum') {
         // parse value as integer and copy to total field
         document.getElementById('total').value += parseInt(elem[i].value);
      }
   }
}
</script> 
 
 
</head> 
 
<body> 
<form action="miro.html" name="eval_edit" method="post" format="html"> 
<table align="center" width = "75%"> 
<tr> 
<td align = "center"> 
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee! 
</td> 
</tr> 
<tr> 
<td align = "center"> 
<!--- very imporant to give the table an id ---> 
<!--- otherwise it won't know where to edit ---> 
<table border="1" id="mySampleTable"> 
<tr> 
<td> 
Lesson 
</td> 
<td> 
Title 
</td> 
<td> 
Instructor 
</td> 
</tr> 
<!--- i create the initial row by hand, there are a lot of ---> 
<!--- different ways to do this depending on what parsing ---> 
<!--- language you use, i found this was easiest for the ---> 
<!--- snippet, but experiment, do your thing mang. ---> 
<!--- this matches the same specs we laid out in the javascript ---> 
<tr> 
<td> 
1 
</td> 
<td> 
<input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td> 
<td> 
<select name="selRow0"> 
<option value="value0">text zero</option> 
<option value="value1">text one</option> 
<option value="value2">text two</option> 
</select> 
</td> 
</tr> 
</table> 
<input name="total" /> 
<!--- our buttons call our javascript functions when clicked ---> 
<input type="button" value="Add" onclick="addRow();" /> 
<input type="button" value="Remove" onclick="removeRow();" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /> 
</td> 
</tr> 
</table> 
</form> 
 
</body> 
 
</html>

okay i have a problem...i get the content of my rows from my database... the problem is when there is 4 rows... and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted.. when i click on the 2nd row... the 4th row is delete...

the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem


Code:

<table width="759" border="0">
    <tr>
      <td colspan="5"><span class="style8">Confirmed Request</span> </td>
    </tr>
    <tr>
      <td width="105" bgcolor="#408080"><span class="style5">Type</span></td>
      <td width="463" bgcolor="#408080"><span class="style5">Topic</span></td>
      <td width="108" bgcolor="#408080"><span class="style5">Date</span></td>
      <td width="25" bgcolor="#408080"><div align="center"></div></td>
      <td width="36" bgcolor="#408080"><div align="center"></div></td>
    </tr>
<%@ page import="com.sun.rowset.CachedRowSetImpl;" %>
<%
	


	int i = 0;
 	CachedRowSetImpl crset3 = new CachedRowSetImpl();
    crset3 = view.home2();
    
    	while (crset3.next())
		{
		
	String day3 = crset3.getString("dep_date");
		
	  String[] monthcol2= day3.split("-");
      
       year = Integer.parseInt(monthcol2[0]); 
       month = Integer.parseInt(monthcol2[1]);
       day= Integer.parseInt(monthcol2[2]);
       m="";
      
      if(month==1)
      {
      m="Jan";
      }
      else if (month==2)
      {
      m="Feb";
      }
      else if (month==3)
      {
      m="March";
      }
      else if (month==4)
      {
      m="April";
      }
      else if (month==5)
      {
      m="May";
      }
      else if (month==6)
      {
      m="June";
      }
      else if (month==7)
      {
      m="July";
      }
      else if (month==8)
      {
      m="Aug";
      }
      else if (month==9)
      {
      m="Sept";
      }
      else if (month==10)
      {
      m="Oct";
      }
       else if (month==11)
      {
      m="Nov";
      }
      else if (month==12)
      {
      m="Dec";
      }
      
      
		if(i==0)
		{
		%>
     <tr>
<script src="images/jquery-latest.js"></script>

<script type="text/javascript">
<!--
function confirmation1(){
        var answer = confirm("Do you want to move this to archives?")
	if (answer){

		$("#movieIcon").parents("tr").fadeOut("slow");		
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
	}
	else{
	}

    }
//-->
</script>

      <td  scope="row"><fade1><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %> </span>&nbsp;</div></fade1></td>
   	  <td  scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_name")%></a>
</span>&nbsp;</div></td>
       <td > <span class="style7">
       <% out.println(day);%>
       <% out.println("-");%>
       <% out.println(m);%>
       <% out.println("-");%>
       <% out.println(year);%> 
       </span></td>
       <td ><div align="center"><a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=yes,scrollbars=yes,status=yes,width=640,height=500'); if (chw != null) chw.focus(); return false"><img src="../Chapters/images/reporticon.gif" border="0"></a></div></td>
       <td ><div align="center"><img id="movieIcon" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation1()"/></div></td>
    </tr>
<%
			i=1;
		}
		else
		{
%>
      <tr>
<script type="text/javascript">
<!--
<!--
function confirmation(){
        var answer = confirm("Do you want to move this to archives?")
	if (answer){

		$("#movieIcon1").parents("tr").fadeOut("slow");		
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
	}
	else{
	}

    }
//-->
//-->
</script>

         <td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %></span>&nbsp;</div></td>
   	  <td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"><%= crset3.getString("dep_name")%>
</span>&nbsp;</div></td>
        <td bgcolor="#CCCCCC"> <span class="style7">
        <% out.println(day);%>
        <% out.println("-");%>
        <% out.println(m);%>
        <% out.println("-");%>
        <% out.println(year);%> 
        </span></td>
        <td bgcolor="#CCCCCC"> <a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=no,scrollbars=yes,status=no,width=640,height=500'); if (chw != null) chw.focus(); return false"><div align="center"><img src="../Chapters/images/reporticon.gif" border="0"></div>
        </a></td>
        <td bgcolor="#CCCCCC" ><div align="center"><img id="movieIcon1" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation()"></div></td>
    </tr>
<%	
			i=0;
    	}
    }
%>
  </table>