How to add select list and options?

[twilitegxa]

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();
}

[twilitegxa]

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);

 

[twilitegxa]

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???