How to add select list and options?

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

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

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

Sign In

How to add select list and options?

Recommended Posts

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information