shortage Posted August 12, 2009 Share Posted August 12, 2009 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 comment Share on other sites More sharing options...
Synook Posted August 12, 2009 Share Posted August 12, 2009 Maybe delete to i row, instead of the "1" row? Link to comment Share on other sites More sharing options...
shortage Posted August 12, 2009 Author Share Posted August 12, 2009 does the same thing :\ Link to comment Share on other sites More sharing options...
jeffman Posted August 12, 2009 Share Posted August 12, 2009 Try alert(r.parentNode.parentNode) . I doubt it's what you think it is. Link to comment Share on other sites More sharing options...
packrat Posted August 12, 2009 Share Posted August 12, 2009 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 comment Share on other sites More sharing options...
shortage Posted August 12, 2009 Author Share Posted August 12, 2009 still cant get it to work :\ Link to comment Share on other sites More sharing options...
jeffman Posted August 12, 2009 Share Posted August 12, 2009 This is the point at which you should probably post more code. Like all the HTML that creates your table. And just to be safe, your script as well. Link to comment Share on other sites More sharing options...
shortage Posted August 12, 2009 Author Share Posted August 12, 2009 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 comment Share on other sites More sharing options...
jeffman Posted August 12, 2009 Share Posted August 12, 2009 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. Link to comment Share on other sites More sharing options...
shortage Posted August 12, 2009 Author Share Posted August 12, 2009 thank you for ll of your help Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.