twilitegxa Posted August 24, 2009 Share Posted August 24, 2009 Can anyone help me with how to write the javascript that woul add a select list and options to the following table adding/deleting code? var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script var RADIO_NAME = 'totallyrad'; // this is being set via script var TABLE_NAME = 'tblSample'; // this should be named in the HTML var ROW_BASE = 1; // first number (for display) var hasLoaded = false; window.onload=fillInRows; function fillInRows() { hasLoaded = true; addRowToTable(); addRowToTable(); } // CONFIG: // myRowObject is an object for storing information about the table rows function myRowObject(one, two, three, four) { this.one = one; // text object this.two = two; // input text object this.three = three; // input checkbox object this.four = four; // input radio object } /* * insertRowToTable * Insert and reorder */ function insertRowToTable() { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var rowToInsertAt = tbl.tBodies[0].rows.length; for (var i=0; i<tbl.tBodies[0].rows.length; i++) { if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.four.getAttribute('type') == 'radio' && tbl.tBodies[0].rows[i].myRow.four.checked) { rowToInsertAt = i; break; } } addRowToTable(rowToInsertAt); reorderRows(tbl, rowToInsertAt); } } /* * addRowToTable * Inserts at row 'num', or appends to the end if no arguments are passed in. Don't pass in empty strings. */ function addRowToTable(num) { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var nextRow = tbl.tBodies[0].rows.length; var iteration = nextRow + ROW_BASE; if (num == null) { num = nextRow; } else { iteration = num + ROW_BASE; } // add the row var row = tbl.tBodies[0].insertRow(num); // CONFIG: requires classes named classy0 and classy1 row.className = 'classy' + (iteration % 2); // CONFIG: This whole section can be configured // cell 0 - text var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); // cell 1 - input text var cell1 = row.insertCell(1); var txtInp = document.createElement('input'); txtInp.setAttribute('type', 'text'); txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration); txtInp.setAttribute('size', '40'); txtInp.setAttribute('value', iteration); // iteration included for debug purposes cell1.appendChild(txtInp); // cell 2 - input button var cell2 = row.insertCell(2); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.setAttribute('value', 'Delete'); btnEl.onclick = function () {deleteCurrentRow(this)}; cell2.appendChild(btnEl); // cell 3 - input checkbox var cell3 = row.insertCell(3); var cbEl = document.createElement('input'); cbEl.setAttribute('type', 'checkbox'); cell3.appendChild(cbEl); // cell 4 - input radio var cell4 = row.insertCell(4); var raEl; try { raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">'); var failIfNotIE = raEl.name.length; } catch(ex) { raEl = document.createElement('input'); raEl.setAttribute('type', 'radio'); raEl.setAttribute('name', RADIO_NAME); raEl.setAttribute('value', iteration); } cell4.appendChild(raEl); // Pass in the elements you want to reference later // Store the myRow object in each row row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl); } } // CONFIG: this entire function is affected by myRowObject settings // If there isn't a checkbox in your row, then this function can't be used. function deleteChecked() { if (hasLoaded) { var checkedObjArray = new Array(); var cCount = 0; var tbl = document.getElementById(TABLE_NAME); for (var i=0; i<tbl.tBodies[0].rows.length; i++) { if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.three.getAttribute('type') == 'checkbox' && tbl.tBodies[0].rows[i].myRow.three.checked) { checkedObjArray[cCount] = tbl.tBodies[0].rows[i]; cCount++; } } if (checkedObjArray.length > 0) { var rIndex = checkedObjArray[0].sectionRowIndex; deleteRows(checkedObjArray); reorderRows(tbl, rIndex); } } } // If there isn't an element with an onclick event in your row, then this function can't be used. function deleteCurrentRow(obj) { if (hasLoaded) { var delRow = obj.parentNode.parentNode; var tbl = delRow.parentNode.parentNode; var rIndex = delRow.sectionRowIndex; var rowArray = new Array(delRow); deleteRows(rowArray); reorderRows(tbl, rIndex); } } function reorderRows(tbl, startingIndex) { if (hasLoaded) { if (tbl.tBodies[0].rows[startingIndex]) { var count = startingIndex + ROW_BASE; for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) { // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.one.data = count; // text // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text // CONFIG: next line is affected by myRowObject settings var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); // for debug purposes tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio // CONFIG: requires class named classy0 and classy1 tbl.tBodies[0].rows[i].className = 'classy' + (count % 2); count++; } } } } function deleteRows(rowObjArray) { if (hasLoaded) { for (var i=0; i<rowObjArray.length; i++) { var rIndex = rowObjArray[i].sectionRowIndex; rowObjArray[i].parentNode.deleteRow(rIndex); } } } function openInNewWindow(frm) { // open a blank window var aWindow = window.open('', 'TableAddRow2NewWindow', 'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400'); // set the target to the blank window frm.target = 'TableAddRow2NewWindow'; // submit frm.submit(); } Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted August 26, 2009 Author Share Posted August 26, 2009 I have gotten a little further with my code and have figure out how to set some options but it is not working properly. I can add as many rows as I want and choose options, but if I delete the first option, the rest of the options' values will display on the next page. If I don't delete the option, it will not display the results at all. Can anyone help me figure out what is wrong with my code? Here are the changes I made: var cell1 = row.insertCell(1); var txtInp = document.createElement('select'); //txtInp.setAttribute('value', 'name'); //first option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Animal Guardian"); theOption.appendChild(theText); theOption.setAttribute('name', INPUT_NAME_PREFIX + iteration); txtInp.setAttribute('value', iteration); // iteration included for debug purposes txtInp.appendChild(theOption); //second option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Combined Attacks"); theOption.appendChild(theText); theOption.setAttribute('value','Combined Attacks'); txtInp.appendChild(theOption); //third option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Elemental Control"); theOption.appendChild(theText); theOption.setAttribute('value','Elemental Control'); txtInp.appendChild(theOption); //fourth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Emotional Control"); theOption.appendChild(theText); theOption.setAttribute('value','Emotional Control'); txtInp.appendChild(theOption); //fifth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Item Of Power"); theOption.appendChild(theText); theOption.setAttribute('value','Item Of Power'); txtInp.appendChild(theOption); //sixth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Knight Attack"); theOption.appendChild(theText); theOption.setAttribute('value','index2'); txtInp.appendChild(theOption); //seventh option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Rejuvenation"); theOption.appendChild(theText); theOption.setAttribute('value','index2'); txtInp.appendChild(theOption); //eighth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Scout Attack"); theOption.appendChild(theText); theOption.setAttribute('value','index2'); txtInp.appendChild(theOption); //txtInp.setAttribute('size', '5'); cell1.appendChild(txtInp, theOption); Quote Link to comment Share on other sites More sharing options...
twilitegxa Posted August 26, 2009 Author Share Posted August 26, 2009 Here is the second page that displays the results: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Table Add Row - new window</title> <script language="JavaScript"> <!-- function printToPage() { var pos; var searchStr = window.location.search; var searchArray = searchStr.substring(1,searchStr.length).split('&'); var htmlOutput = ''; for (var i=0; i<searchArray.length; i++) { htmlOutput += searchArray[i] + '<br />'; } return(htmlOutput); } //--> </script> </head> <body> <b>MREDKJ's Table Add Row</b> <br /> Below should be the name/value pairs that were submitted: <p> <script language="JavaScript"> <!-- document.write(printToPage()); //--> </script> </p> </body> </html> And here is the full JavaScript just in case I added anything I forgot about: // tabledeleterow.js version 1.2 2006-02-21 // mredkj.com // CONFIG notes. Below are some comments that point to where this script can be customized. // Note: Make sure to include a <tbody></tbody> in your table's HTML var INPUT_NAME_PREFIX = 'option'; // this is being set via script var RADIO_NAME = 'totallyrad'; // this is being set via script var TABLE_NAME = 'tblSample'; // this should be named in the HTML var ROW_BASE = 1; // first number (for display) var hasLoaded = false; window.onload=fillInRows; function fillInRows() { hasLoaded = true; addRowToTable(); addRowToTable(); } // CONFIG: // myRowObject is an object for storing information about the table rows function myRowObject(one, two, three, four) { this.one = one; // text object this.two = two; // input text object this.three = three; // input checkbox object this.four = four; // input radio object } /* * insertRowToTable * Insert and reorder */ function insertRowToTable() { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var rowToInsertAt = tbl.tBodies[0].rows.length; for (var i=0; i<tbl.tBodies[0].rows.length; i++) { if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.four.getAttribute('type') == 'radio' && tbl.tBodies[0].rows[i].myRow.four.checked) { rowToInsertAt = i; break; } } addRowToTable(rowToInsertAt); reorderRows(tbl, rowToInsertAt); } } /* * addRowToTable * Inserts at row 'num', or appends to the end if no arguments are passed in. Don't pass in empty strings. */ function addRowToTable(num) { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var nextRow = tbl.tBodies[0].rows.length; var iteration = nextRow + ROW_BASE; if (num == null) { num = nextRow; } else { iteration = num + ROW_BASE; } // add the row var row = tbl.tBodies[0].insertRow(num); // CONFIG: requires classes named classy0 and classy1 row.className = 'classy' + (iteration % 2); // CONFIG: This whole section can be configured // cell 0 - text var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); // cell 1 - input text //var cell1 = row.insertCell(1); //var txtInp = document.createElement('input'); //txtInp.setAttribute('type', 'text'); //txtInp.setAttribute('name', INPUT_NAME_PREFIX + iteration); //txtInp.setAttribute('size', '40'); //txtInp.setAttribute('value', iteration); // iteration included for debug purposes //cell1.appendChild(txtInp); var cell1 = row.insertCell(1); var txtInp = document.createElement('select'); //txtInp.setAttribute('value', 'name'); //first option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Animal Guardian"); theOption.appendChild(theText); theOption.setAttribute('name', INPUT_NAME_PREFIX + iteration); txtInp.setAttribute('value', iteration); // iteration included for debug purposes txtInp.appendChild(theOption); //second option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Combined Attacks"); theOption.appendChild(theText); theOption.setAttribute('value','Combined Attacks'); txtInp.appendChild(theOption); //third option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Elemental Control"); theOption.appendChild(theText); theOption.setAttribute('value','Elemental Control'); txtInp.appendChild(theOption); //fourth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Emotional Control"); theOption.appendChild(theText); theOption.setAttribute('value','Emotional Control'); txtInp.appendChild(theOption); //fifth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Item Of Power"); theOption.appendChild(theText); theOption.setAttribute('value','Item Of Power'); txtInp.appendChild(theOption); //sixth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Knight Attack"); theOption.appendChild(theText); theOption.setAttribute('value','index2'); txtInp.appendChild(theOption); //seventh option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Rejuvenation"); theOption.appendChild(theText); theOption.setAttribute('value','index2'); txtInp.appendChild(theOption); //eighth option var theOption=document.createElement("OPTION"); var theText=document.createTextNode("Scout Attack"); theOption.appendChild(theText); theOption.setAttribute('value','index2'); txtInp.appendChild(theOption); //txtInp.setAttribute('size', '5'); cell1.appendChild(txtInp, theOption); // cell 2 - input button var cell2 = row.insertCell(2); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.setAttribute('value', 'Delete'); btnEl.onclick = function () {deleteCurrentRow(this)}; cell2.appendChild(btnEl); // cell 3 - input checkbox var cell3 = row.insertCell(3); var cbEl = document.createElement('input'); cbEl.setAttribute('type', 'checkbox'); cell3.appendChild(cbEl); // cell 4 - input radio var cell4 = row.insertCell(4); var raEl; try { raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">'); var failIfNotIE = raEl.name.length; } catch(ex) { raEl = document.createElement('input'); raEl.setAttribute('type', 'radio'); raEl.setAttribute('name', RADIO_NAME); raEl.setAttribute('value', iteration); } cell4.appendChild(raEl); // Pass in the elements you want to reference later // Store the myRow object in each row row.myRow = new myRowObject(textNode, txtInp, cbEl, raEl); } } // CONFIG: this entire function is affected by myRowObject settings // If there isn't a checkbox in your row, then this function can't be used. function deleteChecked() { if (hasLoaded) { var checkedObjArray = new Array(); var cCount = 0; var tbl = document.getElementById(TABLE_NAME); for (var i=0; i<tbl.tBodies[0].rows.length; i++) { if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.three.getAttribute('type') == 'checkbox' && tbl.tBodies[0].rows[i].myRow.three.checked) { checkedObjArray[cCount] = tbl.tBodies[0].rows[i]; cCount++; } } if (checkedObjArray.length > 0) { var rIndex = checkedObjArray[0].sectionRowIndex; deleteRows(checkedObjArray); reorderRows(tbl, rIndex); } } } // If there isn't an element with an onclick event in your row, then this function can't be used. function deleteCurrentRow(obj) { if (hasLoaded) { var delRow = obj.parentNode.parentNode; var tbl = delRow.parentNode.parentNode; var rIndex = delRow.sectionRowIndex; var rowArray = new Array(delRow); deleteRows(rowArray); reorderRows(tbl, rIndex); } } function reorderRows(tbl, startingIndex) { if (hasLoaded) { if (tbl.tBodies[0].rows[startingIndex]) { var count = startingIndex + ROW_BASE; for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) { // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.one.data = count; // text // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text // CONFIG: next line is affected by myRowObject settings var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); // for debug purposes tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio // CONFIG: requires class named classy0 and classy1 tbl.tBodies[0].rows[i].className = 'classy' + (count % 2); count++; } } } } function deleteRows(rowObjArray) { if (hasLoaded) { for (var i=0; i<rowObjArray.length; i++) { var rIndex = rowObjArray[i].sectionRowIndex; rowObjArray[i].parentNode.deleteRow(rIndex); } } } function openInNewWindow(frm) { // open a blank window var aWindow = window.open('', 'TableAddRow2NewWindow', 'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400'); // set the target to the blank window frm.target = 'TableAddRow2NewWindow'; // submit frm.submit(); } Can anyone help??? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.