Jump to content

Deletingrows


Recommended Posts

in my table i have delete buttons that are suppose to delete the rows. but whne i click the delete button it deletes the top row. the code on the button is.

<span class="mLeft10">                  <input name="submit8" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />                </span>

and the function code is.

function deleteRow®{var i=r.parentNode.parentNode.rowIndex;document.getElementById('biotab').deleteRow("1");}

how can i make so it deletes the row? not the top one

Link to post
Share on other sites

try recursing through parent nodes until you reach the first 'tr', which ought to be the one you're looking for.

function deleteRow(){var tr=this.parentNode;while(tr!=null && tr.tagName.toLowerCase() != 'tr') tr=tr.parentNode; // recurse to table-rowif(tr==null)return; //didn't ever make a match.document.getElementById('biotab').deleteRow(tr.rowIndex);/* this ought to do it as well.tr.parentNode.removeChild(tr);*/}

Link to post
Share on other sites

this is my code :\

<html>	<head><link href="css/common.css" rel="stylesheet" type="text/css" /><link href="css/M_G1_masthead.css" rel="stylesheet" type="text/css" /><link href="css/M_G3_pageTitle.css" rel="stylesheet" type="text/css" /><link href="css/tools.css" rel="stylesheet" type="text/css" /><link href="css/M_G5_leftNav.css" rel="stylesheet" type="text/css" /><link href="css/M_G42_CobrandedPageTitle.css" rel="stylesheet" type="text/css" /><link href="css/t_4col.css" rel="stylesheet" type="text/css" /><link href="css/t_popup.css" rel="stylesheet" type="text/css" /><link href="css/text.css" rel="stylesheet" type="text/css" />		<script language="javascript">		function toggleArea(area) {			var twisty = document.getElementById("Twisty_" + area);			var section = document.getElementById(area);						if (twisty.src && twisty.src.indexOf("ico14_cntnr_close") > -1) {				section.style.display = "block";				section.style.visibility = "visible";				twisty.src = "./images/ico14_cntnr_open.gif";			} else {				section.style.display = "none";				section.style.visibility = "hidden";				twisty.src = "./images/ico14_cntnr_close.gif";			}		}		function resizeFrame(frame) {			if (frame.contentWindow.document.body) {				var newHeight = frame.contentWindow.document.body.scrollHeight + 17;				frame.style.height = newHeight + 'px';			}		}		function deselectAllRows() {			for (var i=0; i<5; i++) {				var rowId = i + 1;				var image = document.getElementById("row"+rowId);				image.src = "images/offRow.gif";			}		}				function selectRow(onRow) {		  deselectAllRows();		  onRow.src = "images/onRow.gif";		}				function checkmate() {				if ( document.form1.tb1.checked == true) {			document.form2.tf1.disabled = false; 			}		if ( document.form1.tb1.checked == true) {			document.form3.tf2.disabled = false; 			}		if ( document.form1.tb1.checked == true) {			document.form4.tf3.disabled = false; 			}				if ( document.form1.tb1.checked == false) {			document.form2.tf1.disabled = true; 			}		if ( document.form1.tb1.checked == false) {			document.form3.tf2.disabled = true; 			}		if ( document.form1.tb1.checked == false) {			document.form4.tf3.disabled = true; 			}		}function addRow(){    var _table = document.getElementById('biotab').insertRow(1);     var cell0 = _table.insertCell(0);    var cell1 = _table.insertCell(1);   var cell2 = _table.insertCell(2);     var cell3 = _table.insertCell(3);     var cell4 = _table.insertCell(4);    var cell5 = _table.insertCell(5);     var cell6 = _table.insertCell(6);     var cell7 = _table.insertCell(7);     var cell8 = _table.insertCell(8);   cell0.innerHTML = '<input name="tb1" type="checkbox" id="tb1" value="checkbox">';     cell1.innerHTML = '<input name="tf7" type="text" disabled id="tf7" value="ES01" size="4" maxlength="4">';    cell2.innerHTML = '<input name="tf6" type="text" disabled id="tf6" value="2005" size="4" maxlength="4">';   cell3.innerHTML = '<input name="tf5" type="text" disabled id="tf5" value="Z1" size="2" maxlength="2">';   cell4.innerHTML = '<input name="tf4" type="text" disabled id="tf4" value="123456789101"size="12" maxlength="12">';   cell5.innerHTML = '<input name="tf1" type="text" disabled id="tf1" value="01.06.2009" size="10" maxlength="10">';      cell6.innerHTML = '<input name="tf2" type="text" disabled id="tf2" value="30.06.2009" size="10" maxlength="10">';    cell7.innerHTML = '<input name="tf3" type="text" disabled id="tf3" value="3.581" size="5" maxlength="5">';    cell8.innerHTML = '<input name="submit3" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />';   }   function deleteRow(r){var i=r.parentNode.parentNode.rowIndex;document.getElementById('biotab').deleteRow("1");}var data = "0123456789";var done = 1;function statusIn(text) {decrypt(text, 2, 1);}function statusOut() {self.status = '';done = 1;}function decrypt(text, max, delay) {if (done) {done = 0;decrypt_helper(text, max, delay,  0, max);   }}function decrypt_helper(text, runs_left, delay, charvar, max) {if (!done) {runs_left = runs_left - 1;var status = text.substring(0, charvar);for (var current_char = charvar; current_char < text.length; current_char++) {status += data.charAt(Math.round(Math.random()*data.length));}window.status = status;var rerun = "decrypt_helper('" + text + "'," + runs_left + "," + delay + "," + charvar + "," + max + ");"var new_char = charvar + 1;var next_char = "decrypt_helper('" + text + "'," + max + "," + delay + "," + new_char + "," + max + ");"if(runs_left > 0) {setTimeout(rerun, delay);}else {if (charvar < text.length) {setTimeout(next_char, Math.round(delay*(charvar+3)/(charvar+1)));}else {done = 1;		 }	  }   }}		</script>	</head>	<body>  <div id="mainContainer">		<div id="pageTitleContainer"> 			<div id="pageTitleBgPanel">			  <h1 class="pageTitle">							  </h1>			</div>		</div>						<div class="vSpacer5"></div>		<div class="myTray"><div style="float:right"><img src="./images/ico14_cntnr_open.gif" width="18" align="middle" id="Twisty_search" style="vertical-align:middle" onClick="toggleArea('search')"/></div>		 Search or Create </div>			<div class="vSpacer5"></div>		<iframe onload="resizeFrame(this)" id="search" src="Search bio.html?state=mon" frameborder="0" name="search" width="100%"> No frames </iframe>				<div class="myHr"><hr/></div>		<div class="clearAll vSpacer4 clearAll"></div>		<table width="100%" border="0" cellpadding="0" cellspacing="0">			<tr>				<td><div class="vSpacer5"> </div>	<div class="myTray"><div style="float:right"><img align="middle" style="vertical-align:middle" id="Twisty_results" src="./images/ico14_cntnr_open.gif" onClick="toggleArea('results')"/></div>      Results </div>		<div class="vSpacer5"> </div>		<div id="results">		  <div id="div">			<table width="98%" cellpadding="5" cellspacing="0" class="myTable" id="biotab">			  <tr>				<th class="myTable" width="4%" scope="col"> </th>				<th class="myTable" width="12%" scope="col">Company Code </th>				<th class="myTable" width="8%" scope="col">Plant</th>				<th class="myTable" width="8%" scope="col">Tax Group </th>				<th class="myTable" width="11%" scope="col">Material</th>				<th class="myTable" width="14%" scope="col">Start Date </th>				<th class="myTable" width="18%" scope="col">End Date </th>				<th class="myTable" width="18%" scope="col">Bio Fuel Content </th>				<th class="myTable" width="7%" scope="col">Delete</th>			  </tr>			  <tr>				<td class="rowSelector"><form name="form1" method="post" action="">					<input name="tb1" type="checkbox" id="tb1" value="checkbox">				</form></td>				<td class="myTable"><form name="form8" method="post" action="">					<label></label>					<input name="tf7" type="text" disabled id="tf7" value="ES01" size="4" maxlength="4">				</form></td>				<td class="myTable"><form name="form7" method="post" action="">					<label>					<input name="tf6" type="text" disabled id="tf6" value="2005" size="4" maxlength="4">					</label>				</form></td>				<td class="myTable"><form name="form6" method="post" action="">					<label></label>					<input name="tf5" type="text" disabled id="tf5" value="Z1" size="2" maxlength="2">				</form></td>				<td class="myTable"><form name="form5" method="post" action="">					<label></label>					<input name="tf4" type="text" disabled id="tf4" value="123456789101" size="12" maxlength="12">				</form></td>				<td class="myTable"><form name="form2" method="post" action="">					<label>					<input name="tf1" type="text" disabled id="tf1" value="01.06.2009" size="10" maxlength="10">					</label>				</form></td>				<td class="myTable"><form name="form3" method="post" action="">					<label>					<input name="tf2" type="text" disabled id="tf2" value="30.06.2009" size="10" maxlength="10">					</label>				</form></td>				<td class="myTable"><form name="form4" method="post" action="">					<label></label>					<input name="tf3" type="text" disabled id="tf3" value="3.581" size="5" maxlength="5">				</form></td>				<td class="myTable"><span class="mLeft10">				  <input name="submit3" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />				</span></td>			  </tr>			  <tr>				<td class="rowSelector"><input type="checkbox" name="checkbox2" value="checkbox"></td>				<td class="myTable"><input name="tf72" type="text" disabled id="tf72" value="ES01" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf62" type="text" disabled id="tf62" value="2005" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf52" type="text" disabled id="tf52" value="Z1" size="2" maxlength="2"></td>				<td class="myTable"><form name="form5" method="post" action="">					<label></label>					<input name="tf42" type="text" disabled id="tf42" value="123456789102" size="12" maxlength="12">				</form></td>				<td class="myTable"><input name="tf14" type="text" disabled id="tf14" value="01.07.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf24" type="text" disabled id="tf24" value="31.07.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf32" type="text" disabled id="tf32" value="3.581" size="5" maxlength="5"></td>				<td class="myTable"><span class="mLeft10">				  <input name="submit4" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />				</span></td>			  </tr>			  <tr>				<td class="rowSelector"><input type="checkbox" name="checkbox3" value="checkbox"></td>				<td class="myTable"><input name="tf73" type="text" disabled id="tf73" value="ES01" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf63" type="text" disabled id="tf63" value="2005" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf53" type="text" disabled id="tf53" value="Z2" size="2" maxlength="2"></td>				<td class="myTable"><form name="form5" method="post" action="">					<label></label>					<input name="tf43" type="text" disabled id="tf43" value="123456789103" size="12" maxlength="12">				</form></td>				<td class="myTable"><input name="tf12" type="text" disabled id="tf12" value="01.06.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf22" type="text" disabled id="tf22" value="30.06.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf33" type="text" disabled id="tf33" value="3.037" size="5" maxlength="5"></td>				<td class="myTable"><span class="mLeft10">				  <input name="submit5" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />				</span></td>			  </tr>			  <tr>				<td class="rowSelector"><input type="checkbox" name="checkbox4" value="checkbox"></td>				<td class="myTable"><input name="tf74" type="text" disabled id="tf74" value="ES01" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf64" type="text" disabled id="tf64" value="2005" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf54" type="text" disabled id="tf54" value="Z2" size="2" maxlength="2"></td>				<td class="myTable"><form name="form5" method="post" action="">					<label></label>					<input name="tf44" type="text" disabled id="tf44" value="123456789104" size="12" maxlength="12">				</form></td>				<td class="myTable"><input name="tf142" type="text" disabled id="tf142" value="01.07.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf242" type="text" disabled id="tf242" value="31.07.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf332" type="text" disabled id="tf332" value="3.037" size="5" maxlength="5"></td>				<td class="myTable"><span class="mLeft10">				  <input name="submit6" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />				</span></td>			  </tr>			  <tr>				<td class="rowSelector"><input type="checkbox" name="checkbox5" value="checkbox"></td>				<td class="myTable"><input name="tf75" type="text" disabled id="tf75" value="ES01" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf65" type="text" disabled id="tf65" value="2005" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf55" type="text" disabled id="tf55" value="Z5" size="2" maxlength="2"></td>				<td class="myTable"><form name="form5" method="post" action="">					<label></label>					<input name="tf45" type="text" disabled id="tf45" value="123456789105" size="12" maxlength="12">				</form></td>				<td class="myTable"><input name="tf13" type="text" disabled id="tf13" value="01.06.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf23" type="text" disabled id="tf23" value="30.06.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf333" type="text" disabled id="tf333" value="0.144" size="5" maxlength="5"></td>				<td class="myTable"><span class="mLeft10">				  <input name="submit7" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />				</span></td>			  </tr>			  <tr>				<td class="rowSelector"><input type="checkbox" name="checkbox6" value="checkbox"></td>				<td class="myTable"><input name="tf76" type="text" disabled id="tf76" value="ES01" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf66" type="text" disabled id="tf66" value="2005" size="4" maxlength="4"></td>				<td class="myTable"><input name="tf56" type="text" disabled id="tf56" value="Z5" size="2" maxlength="2"></td>				<td class="myTable"><form name="form5" method="post" action="">					<label></label>					<input name="tf46" type="text" disabled id="tf46" value="123456789106" size="12" maxlength="12">				</form></td>				<td class="myTable"><input name="tf143" type="text" disabled id="tf143" value="01.07.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf243" type="text" disabled id="tf243" value="31.07.2009" size="10" maxlength="10"></td>				<td class="myTable"><input name="tf3332" type="text" disabled id="tf3332" value="0.144" size="5" maxlength="5"></td>				<td class="myTable"><span class="mLeft10">				  <input name="submit8" type="button" class="goAnchor mBot2" onClick="deleteRow(this)" value="Delete" />				</span></td>			  </tr>			  <tr class="myTableFooter">				<td align="left"  valign="middle" colspan="16"><img align="absbottom" src="images/page_first.gif" alt=" " /><img align="absbottom" src="images/page_up.gif" alt=" " /><img align="absbottom" src="images/row_up.gif" alt=" " /> <span class="myTablePager">Row 1 of 25 </span> <img align="absbottom" src="images/row_down.gif" alt=" " /><img align="absbottom" src="images/page_down.gif" alt=" " /><img align="absbottom" src="images/page_last.gif" alt=" " /> </td>			  </tr>			</table>		  </div>		</div>				<div class="clearAll vSpacer4 clearAll"></div>		<div class="clearAll vSpacer4 clearAll"></div>				<div class="outsideContainer"><div class="clearAll" align="right"><span class="mLeft10">  <input name="submit2" type="button" class="goAnchor mBot2" onClick="addRow(document.biotab)" value="Create" />  <input name="Button" type="button" class="goAnchor mBot2" onClick="checkmate()" value="Change" />  <input name="submit" type="button" class="goAnchor mBot2" onClick= "alert('Your Biofuel Has Been Saved')"  value="Save" />		</span>	</div></div>										<div class="myHr"><hr/></div>		<div class="clearAll vSpacer4 clearAll"></div>		<div class="clearAll vSpacer4 clearAll"></div>								<div class="vSpacer5"> </div>		<div class="vSpacer5"> </div>			  <!-- InstanceEndEditable --> </td>			</tr>		</table>		<div class="outsideContainer">			<div class="leftLinksBelowForm"> </div>			<div class="clearAll" align="right">		</div>	</div>		</body>

Link to post
Share on other sites

As I suspected, your original code was only getting you up the hierarchy as far as the table cell, not the table row. So accessing a rowIndex got you nothing.Your original deleteRow() function kept deleting row 1, since that's the way it's written.packrat's function came very close to fixing it, but needed a little tweaking. Specifically, it ignored the argument being passed to it and incorrectly used the this keyword. The following tweak works fine. Make sure you test it by supplying different values to each of your rows, otherwise you won't know for sure if the correct row is being deleted:

function deleteRow(tr) {	 while (tr != null && tr.tagName.toLowerCase() != 'tr') {		 tr = tr.parentNode; // recurse to table-row	 }	 if (tr == null) {		 return; //didn't ever make a match.	 }	 tr.parentNode.removeChild(tr); }

It's worth noting that this function is generic enough that you can copy it into any document and it'll work just fine. It doesn't matter how deeply the "click" element is embedded, and it needs no id to identify the correct table.

Edited by Deirdre's Dad
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...