Cannot get rows to delete

Fiat77 · May 10, 2005

We cannot figure out how to pass a parameter and get rows to delete. We verified that the logic works by hard coding. How can we fix the code below to get a selected row to delete?

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="include/taps_main2.css">
<link rel="stylesheet" type="text/css" media="print" href="include/taps_print.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TAPS Question Builder</title>
<script language="JavaScript" src="include/img_swap.js" type="text/JavaScript">
</script>
<script language="JavaScript1.2">
function addQuestionFF() //THIS FUNCTION ADDS A ROWS TO THE QUESTIONS TABLE
{
//NEW ROW #1 -------- create a new tr element
var rowNumber = parseInt(document.questionBuilder.NumberOfRows.value)+1;
var elTR = document.createElement("TR");
elTR.id = "newrow"+rowNumber;
//COLUMN #1 -------- create add/erase td element with +/- input button inside

var elTD1 = document.createElement("TD");
elTD1.id = "newcol"+rowNumber;

var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
elINPUT.type = "button";
elINPUT.name = "butAddQues";
elINPUT.value = "+";
// elINPUT.class = "buttonsMax";
e2INPUT.type = "button";
e2INPUT.name = "butEraseQues";
e2INPUT.value = "-";
if (navigator.appName.indexOf('Microsoft')==-1) {
//Not IE
elINPUT.addEventListener("click", addQuestionFF, true);
e2INPUT.addEventListener("click", deleteQuestionFF, true);
} else {
//IE
elINPUT.attachEvent("onclick", addQuestionFF);
e2INPUT.attachEvent("onclick", deleteQuestionFF);
}
elTD1.appendChild(elINPUT);
elTD1.appendChild(e2INPUT);

//elTD1.appendChild(document.createTextNode("add and delete buttons here"));
//COLUMN #2 -------- create MOVE td element with up/down buttons inside
var elTD2 = document.createElement("TD");
elTD2.id = "newcol"+rowNumber;
var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
// elINPUT.class = "buttonsMax";
elINPUT.type = "button";
elINPUT.name = "newButton";
elINPUT.value = "?";
e2INPUT.type = "button";
e2INPUT.name = "newButton";
e2INPUT.value = "?";
elTD2.appendChild(elINPUT);
elTD2.appendChild(e2INPUT);

//COLUMN #3 -------- create RESPONSE TYPE td element with mc/fi radio buttons inside
var elTD3 = document.createElement("TD");
elTD3.id = "newcol"+rowNumber;
var e2INPUT = document.createElement("TEXTAREA");
e2INPUT.name = "txtBox";
e2INPUT.rows = "2";
e2INPUT.cols = "50";
elTD3.appendChild(e2INPUT);

//COLUMN #4 -------- create RESPONSE TYPE td element with mc/fi radio buttons inside
var elTD4 = document.createElement("TD");
elTD4.id = "newcol"+rowNumber;
var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
elINPUT.type = "radio";
elINPUT.name = "radio";
elINPUT.value = "M";
e2INPUT.type = "radio";
e2INPUT.name = "radio";
e2INPUT.value = "F";
elTD4.appendChild(elINPUT);
elTD4.appendChild(document.createTextNode("Multiple Choice"));
elTD4.appendChild(e2INPUT);
elTD4.appendChild(document.createTextNode("Fill-in"));

//COLUMN #5 -------- create SUBQUESTION BASED ON td element with yes/no radio buttons inside
var elTD5 = document.createElement("TD");
elTD5.id = "newcol"+rowNumber;
var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
elINPUT.type = "radio";
elINPUT.name = "radGrpRespType";
elINPUT.value = "Yes";
e2INPUT.type = "radio";
e2INPUT.name = "radGrpRespType";
e2INPUT.value = "No";
elTD5.appendChild(elINPUT);
elTD5.appendChild(document.createTextNode("Yes"));
elTD5.appendChild(e2INPUT);
elTD5.appendChild(document.createTextNode("No"));

//put the 5 new TDs in the new TR
elTR.appendChild(elTD1);
elTR.appendChild(elTD2);
elTR.appendChild(elTD3);
elTR.appendChild(elTD4);
elTR.appendChild(elTD5);

// get reference to the table element - doing it this way doesn't work in IE
//var elTABLE = document.getElementById("questionContainerFF");

//get reference to the first TR element
var elFirstTR = document.getElementById("firstrow");

//put the new TR in the TABLE
//elTABLE.appendChild(elTR);
elFirstTR.parentNode.appendChild(elTR);
document.questionBuilder.NumberOfRows.value= (parseInt(document.questionBuilder.NumberOfRows.value)+1);

}
</script>

<script language="JavaScript1.2">
function deleteQuestionFF(rowNumber) //THIS FUNCTION ADDS A ROWS TO THE QUESTIONS TABLE
{

//remove the 5 new TDs in the new TR
//var elTable = document.getElementByID("questionContainerFF");
var numberOfRows
var elTR = document.getElementById("newrow3");
var elTD1 = document.getElementById("newcol3");
var elTD2 = document.getElementById("newcol3");
var elTD3 = document.getElementById("newcol3");
var elTD4 = document.getElementById("newcol3");
var elTD5 = document.getElementById("newcol3");
elTR.removeChild(elTD1);
elTR.removeChild(elTD2);
elTR.removeChild(elTD3);
elTR.removeChild(elTD4);
elTR.removeChild(elTD5);
//elTable.removeChild(elTR);
/*
elTR.removeChild(elTR.getElementById("newcol2"));
elTR.removeChild(elTR.getElementById("newcol3"));
elTR.removeChild(elTR.getElementById("newcol4"));
elTR.removeChild(elTR.getElementById("newcol5"));
*/
//var el = document.getElementById("firstrow");
//if (el.hasChildNodes())
// el.removeChild(el.lastChild);

}

</script>

</head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#7D3121">
<tr>
<td width="700" height="45" class="redHeader1">TAPS - FORM BUILDER QUESTIONS </td>
</tr>
</table>

<Form name="questionBuilder" action="process.jsp" method="post">
<input type="text" name="NumberOfRows" value="0">
<table width="85%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="e1d9b5" id="questionContainerFF">
<tr>
<td class="burgundyHeader4" align="center">Add / Erase</td>
<td class="burgundyHeader4" align="center">Move</td>
<td width="357" bgcolor="#FFFFFF" class="burgundyHeader4" align="left">Question Text</td>
<td width="156" bgcolor="#FFFFFF" class="burgundyHeader4" align="left">Response Type</td>
<td align="left" bgcolor="#FFFFFF" class="burgundyHeader4">Subquestion<br>
based on: </td>
</tr>
<tr id="firstrow">
<td width="52"><input name="butAddQues" type="button" value="+" onclick="addQuestionFF()">
<input name="butEraseQues" type="button" value="-" onclick="deleteQuestionFF()">
</td>
<td width="86"><input name="butMoveUp" type="button" value="?">
<input name="butMoveDown" type="button" value="?">
</td>
<td class="textRegularBrown" align="left"><textarea name="txtAreaQuestionText" cols="40" rows="2" class="textRegularBrown" id="txtAreaQuestionText"></textarea>
<INPUT type="hidden" name="questionID" value="">
<INPUT type="hidden" name="radioButtonID" value="">
</td>
<td valign="middle" nowrap class="textRegularBrown" align="left"><input type="radio" name="radGrpRespType" value="M">
Multiple Choice<input type="radio" name="radGrpRespType" value="F">
Fill-in
</td>
<td width="126" valign="middle" nowrap class="textRegularBrown" align="left"><p>
<input type="radio" name="radGrpDisp" value="yes">
Yes<input type="radio" name="radGrpDisp" value="no">
No
</td>
</tr>
</table>
</form>
</body>
</html>

BillyRayPreachersSon · May 10, 2005

Are there ever going to be more rows, or just the one, like you have above?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

cLFlaVA · May 10, 2005

do you want something like this?

Code:

var elTR = document.getElementById("newrow" + rowNumber);

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Fiat77 · May 10, 2005

clFlava

Tried this concept you listed
var elTR = document.getElementById("newrow" + rowNumber);
But we cannot get the parameter passed in the delete section

Thanks for your response.

stormbind · May 10, 2005

In MSIE you can use table.deleteRow(rowIndex);

I have not tested this in FF.

--Glen

Memoria mihi benigna erit qui eam perscribam

Fiat77 · May 10, 2005

This code fixed my mozilla problem but won't work in IE any ideas? Thanks

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="include/taps_main2.css">
<link rel="stylesheet" type="text/css" media="print" href="include/taps_print.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TAPS Question Builder</title>
<script language="JavaScript" src="include/img_swap.js" type="text/JavaScript">
</script>
<script language="JavaScript1.2">
function addQuestionFF() //THIS FUNCTION ADDS A ROWS TO THE QUESTIONS TABLE
{
//NEW ROW #1 -------- create a new tr element
var rowNumber = parseInt(document.questionBuilder.NumberOfRows.value)+1;
var elTR = document.createElement("TR");
elTR.id = "newrow"+rowNumber;
//COLUMN #1 -------- create add/erase td element with +/- input button inside

var elTD1 = document.createElement("TD");
elTD1.id = "newcol"+rowNumber;

var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
elINPUT.type = "button";
elINPUT.name = "butAddQues";
elINPUT.value = "+";
// elINPUT.class = "buttonsMax";
e2INPUT.type = "button";
e2INPUT.name = "butEraseQues";
e2INPUT.value = "-";
e2INPUT.parRowId = "newrow"+rowNumber;
if (navigator.appName.indexOf('Microsoft')==-1) {
//Not IE
elINPUT.addEventListener("click", addQuestionFF, true);
e2INPUT.addEventListener("click", deleteQuestionFF, true);
} else {
//IE
elINPUT.attachEvent("onclick", addQuestionFF);
e2INPUT.attachEvent("onclick", deleteQuestionFF);
}
elTD1.appendChild(elINPUT);
elTD1.appendChild(e2INPUT);

//elTD1.appendChild(document.createTextNode("add and delete buttons here"));
//COLUMN #2 -------- create MOVE td element with up/down buttons inside
var elTD2 = document.createElement("TD");
elTD2.id = "newcol"+rowNumber;
var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
// elINPUT.class = "buttonsMax";
elINPUT.type = "button";
elINPUT.name = "newButton";
elINPUT.value = "▲";
e2INPUT.type = "button";
e2INPUT.name = "newButton";
e2INPUT.value = "▼";
elTD2.appendChild(elINPUT);
elTD2.appendChild(e2INPUT);

//COLUMN #3 -------- create RESPONSE TYPE td element with mc/fi radio buttons inside
var elTD3 = document.createElement("TD");
elTD3.id = "newcol"+rowNumber;
var e2INPUT = document.createElement("TEXTAREA");
e2INPUT.name = "txtBox";
e2INPUT.rows = "2";
e2INPUT.cols = "50";
elTD3.appendChild(e2INPUT);

//COLUMN #4 -------- create RESPONSE TYPE td element with mc/fi radio buttons inside
var elTD4 = document.createElement("TD");
elTD4.id = "newcol"+rowNumber;
var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
elINPUT.type = "radio";
elINPUT.name = "radio";
elINPUT.value = "M";
e2INPUT.type = "radio";
e2INPUT.name = "radio";
e2INPUT.value = "F";
elTD4.appendChild(elINPUT);
elTD4.appendChild(document.createTextNode("Multiple Choice"));
elTD4.appendChild(e2INPUT);
elTD4.appendChild(document.createTextNode("Fill-in"));

//COLUMN #5 -------- create SUBQUESTION BASED ON td element with yes/no radio buttons inside
var elTD5 = document.createElement("TD");
elTD5.id = "newcol"+rowNumber;
var elINPUT = document.createElement("INPUT");
var e2INPUT = document.createElement("INPUT");
elINPUT.type = "radio";
elINPUT.name = "radGrpRespType";
elINPUT.value = "Yes";
e2INPUT.type = "radio";
e2INPUT.name = "radGrpRespType";
e2INPUT.value = "No";
elTD5.appendChild(elINPUT);
elTD5.appendChild(document.createTextNode("Yes"));
elTD5.appendChild(e2INPUT);
elTD5.appendChild(document.createTextNode("No"));

//put the 5 new TDs in the new TR
elTR.appendChild(elTD1);
elTR.appendChild(elTD2);
elTR.appendChild(elTD3);
elTR.appendChild(elTD4);
elTR.appendChild(elTD5);

// get reference to the table element - doing it this way doesn't work in IE
//var elTABLE = document.getElementById("questionContainerFF");

//get reference to the first TR element
var elFirstTR = document.getElementById("firstrow");

//put the new TR in the TABLE
//elTABLE.appendChild(elTR);
elFirstTR.parentNode.appendChild(elTR);
document.questionBuilder.NumberOfRows.value= (parseInt(document.questionBuilder.NumberOfRows.value)+1);

}

</script>

<script language="JavaScript1.2">
function deleteQuestionFF(pass_id) {
if (typeof pass_id == "string")
row_id = pass_id;
else
row_id = this.parRowId;

qtable = (document.all) ? document.all.questionContainerFF : document.getElementById("questionContainerFF");
allRows = qtable.getElementsByTagName("tr");
if (allRows.length <= 2) {
alert("I think it would be better not to delete this

!");
return false;
}
root = allRows[0].parentNode;

for(var i = 0; i < allRows.length; i++) {
if (allRows.id == row_id)
root.removeChild(allRows);
}

}
</script>

</head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#7D3121">
<tr>
<td width="700" height="45" class="redHeader1">TAPS - FORM BUILDER QUESTIONS </td>
</tr>
</table>

<Form name="questionBuilder" action="process.jsp" method="post">
<input type="text" name="NumberOfRows" value="0">
<table width="85%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="e1d9b5" id="questionContainerFF">
<tr>
<td class="burgundyHeader4" align="center">Add / Erase</td>
<td class="burgundyHeader4" align="center">Move</td>
<td width="357" bgcolor="#FFFFFF" class="burgundyHeader4" align="left">Question Text</td>
<td width="156" bgcolor="#FFFFFF" class="burgundyHeader4" align="left">Response Type</td>
<td align="left" bgcolor="#FFFFFF" class="burgundyHeader4">Subquestion<br>
based on: </td>
</tr>
<tr id="firstrow">
<td width="52"><input name="butAddQues" type="button" value="+" onclick="addQuestionFF()">
<input name="butEraseQues" type="button" value="-" onclick="deleteQuestionFF('firstrow')">
</td>
<td width="86"><input name="butMoveUp" type="button" value="▲">
<input name="butMoveDown" type="button" value="▼">
</td>
<td class="textRegularBrown" align="left"><textarea name="txtAreaQuestionText" cols="40" rows="2" class="textRegularBrown" id="txtAreaQuestionText"></textarea>
<INPUT type="hidden" name="questionID" value="">
<INPUT type="hidden" name="radioButtonID" value="">
</td>
<td valign="middle" nowrap class="textRegularBrown" align="left"><input type="radio" name="radGrpRespType" value="M">
Multiple Choice<input type="radio" name="radGrpRespType" value="F">
Fill-in
</td>
<td width="126" valign="middle" nowrap class="textRegularBrown" align="left"><p>
<input type="radio" name="radGrpDisp" value="yes">
Yes<input type="radio" name="radGrpDisp" value="no">
No
</td>
</tr>
</table>
</form>
</body>
</html>

RTomes · May 10, 2005

Use the table object for IE.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/table.asp

IE has issues when working with tables using the child collections.

All else fails, this works for IE, FF and NS:

document.getElementById("MyDiv").innerHTML=sMyReplacementHTMLCode

BillyRayPreachersSon · May 11, 2005

Change this:

Code:

if (navigator.appName.indexOf('Microsoft')==-1)  {
	//Not IE
	elINPUT.addEventListener("click", addQuestionFF, true);
	e2INPUT.addEventListener("click", deleteQuestionFF, true);
} else {
	//IE
	elINPUT.attachEvent("onclick", addQuestionFF);
	e2INPUT.attachEvent("onclick", deleteQuestionFF);
}

to this:

Code:

elINPUT.onclick = addQuestionFF;
e2INPUT.onclick = deleteQuestionFF;

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Cannot get rows to delete

Fiat77

Programmer

BillyRayPreachersSon

Programmer

cLFlaVA

Programmer

Fiat77

Programmer

stormbind

Technical User

Fiat77

Programmer

RTomes

Programmer

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor