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!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need Help Attaching an OnClick Event to a Row 2

Status
Not open for further replies.
LyndonOHRC

LyndonOHRC

Programmer
Sep 8, 2005
603
US
I'm trying to attach an event to my dynamic table rows so I can delete a row. The event function just has an alert so far so I can see what row the event is triggered on and the results have me confused (apparently not that hard to do).

When the event fires I get the same parameter passed to the function no matter which row I click. It is always the length of the table (number of rows). It's like every row is getting the same onclick event saved to it...

attachEvent code section:
Code: 
DupeCheck.value='';
AllValuesSort = AllValues.sort();
for (i=1; i<=HowManyScans; i++){
	DupeCheck.value=DupeCheck.value+'[delim]'+AllValuesSort[(i - 1)];
	var putRow=document.getElementById('tbl').insertRow();
	[COLOR=red]putRow.id=(i-1)[/color];
	var putCell=putRow.insertCell();
	putCell.innerHTML=i+'. '+AllValuesSort[(i - 1)];
	putCell.style.color='DodgerBlue';
	putCell.style.Background='white';
	[COLOR=red]putCell.attachEvent("onclick",function () { return DeleteMe((i-1)); })[/color];
}
document.Scan.ScannedLabel.value='';
document.Scan.ScannedLabel.focus();
}

onclick code section:
Code: 
function DeleteMe(WhichRow){
	getRow=document.getElementById('Row '+WhichRow);
	alert(WhichRow);
}
Thanks

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Sort by date Sort by votes
BTW, I straightened out the index count. I had it off by one in a vain attempt to figure this out out on my own.

Code: 
DupeCheck.value='';
AllValuesSort = AllValues.sort();
for ([COLOR=red]i=0; i<HowManyScans[/color]; i++){
	DupeCheck.value=DupeCheck.value+'[delim]'+AllValuesSort[(([COLOR=red]i[/color])];
	var putRow=document.getElementById('tbl').insertRow();
	putRow.id=([COLOR=red]i[/color];
	var putCell=putRow.insertCell();
	putCell.innerHTML=(([COLOR=red]i+1[/color])+'. '+AllValuesSort[(([COLOR=red]i[/color])];
	putCell.style.color='DodgerBlue';
	putCell.style.Background='white';
	putCell.attachEvent("onclick",function () { return DeleteMe(([COLOR=red]i[/color]); });
}
document.Scan.ScannedLabel.value='';
document.Scan.ScannedLabel.focus();

I ment to fix that befor this post - sorry.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Upvote 0 Downvote
There are many ways around this problem, but they might not work depending on what you're after. Let me elaborate:

If you attach the index of each row to itself, when any row is deleted (I'm assuming that will be the end result of the 'DeleteMe' function), the index of all subsequent rows would need to be recalculated, so you might need to re-index them all anyway.

Can you confirm whether you will be actually deleting the rows? If not, the solution is fairly easy. If so, a different solution would be needed.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan,

My intention is to delete the row to remove it from display. Then delete the hidden form element so the database write won't happen on the form's action page.

This application is for the user to scan many barcode items quickly and sometimes the scan is misinterpreted by the reader. Because of the consistent format of our numbering system it is easy to see when there is a misread. A simple onclick-delete of the scanned code would do nicely.

Thanks


Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Upvote 0 Downvote
Another option springs to mind which avoids the need to reindex - you could use:

Code: 
DeleteMe(this);

In your case, "this" would refer to the cell, and given that, you should be able to easily get a reference to the row or other cells / inputs in that row.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Dan, I tried:

Code: 
[COLOR=red]
    putCell.id=i[/color];
	putCell.innerHTML=(i+1)+'. '+AllValuesSort[(i)];
	putCell.style.color="DodgerBlue";
	putCell.style.Background="white";
	putCell.style.fontWeight="bold";
	putCell.style.fontfamily="Verdana";
	putCell.style.fontsize="8pt";
	putCell.align = "center";
	putCell.attachEvent("onclick",function () { return DeleteMe([COLOR=red]this[/color]); });
}
document.Scan.ScannedLabel.value='';
document.Scan.ScannedLabel.focus();
}
		return;
		}

function DeleteMe(WhichCell){
	getCell=document.getElementById(WhichCell);
	alert([COLOR=red]getCell.id[/color]);
}

and get "Error: object required" on the line with alert(getRow.id).

Lyndon

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Upvote 0 Downvote
Try changing this:

Code: 
putCell.attachEvent("onclick",function () { return DeleteMe(this); });

to this:

Code: 
putCell.onclick = function () { return DeleteMe(this); };

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I'm still getting the "Error: object required" on the line with the alert().

I usually try to avoid burdening everyone with all the code but maybe I should this time...

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
	<title>Scan Bar Codes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<form name="Scan" action="ScanAction.cfm" method="post" onsubmit="return false">
	<input id="CurrentValue" name="CurrentValue" type="Hidden" value="0">
	<input name="ScanCount" type="Hidden" value="0">
	<input name="ScanList" type="Hidden" value="">
	<table class="BinkleyTable" align="center">
		<tr>
			<td class="ColumnHeadingCell" colspan="2">
				<div align="center">Scan Bar Codes</div>
			</td>
		</tr>
		<tr>
			<td class="NormalCell" style="border-bottom: solid 1px DodgerBlue;" >
				<div align="right">Scan Label:</div>
			</td>
			<td class="NormalCell" style="border-bottom: solid 1px DodgerBlue;">
				<input type="Text" size="7" maxlength="7" name="ScannedLabel" onkeypress="return checkKey(event)"> <input type="Button" value="Save" onclick="this.form.submit()">
			</td>
		</tr>
		<tr>
			<td class="NormalCell" colspan="2" align="center" style="background: white;">
				<table id="tbl" width="100%" align="center" style="background: white;">
					<tr id="0">
						<td></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

<script language="JavaScript" type="text/javascript"> 
		document.Scan.ScannedLabel.focus(); 
		function checkKey(event){
			var pK = document.all? event.keyCode:event.which; //
			if(pK==13) { //if CR/LF - reader device ends all transaction with chr(13)
				var DupeCheck=document.getElementById('ScanList');
				document.Scan.ScannedLabel.value=document.Scan.ScannedLabel.value.toUpperCase(); //Scanned Value to Upper Case
				if (DupeCheck.value.indexOf(document.Scan.ScannedLabel.value) > -1){ //if duplicate
					alert('Label '+document.Scan.ScannedLabel.value+' has already beeen scanned');
					document.Scan.ScannedLabel.value='';
					document.Scan.ScannedLabel.focus();
					return;
				} //else not duplicate
				var HowManyScans=document.Scan.ScanCount.value; //get prev scan count
				HowManyScans=++HowManyScans; //increment can count
				document.Scan.ScanCount.value=HowManyScans; //set scan count in form
				NewHiddeninput=document.createElement("input"); //create hidden form elem object to store scan value 
				NewHiddeninput.id='CurrentValue'+HowManyScans; //set dynamic elem name 
				NewHiddeninput.type='Hidden'; //set elem type
				NewHiddeninput.value=document.Scan.ScannedLabel.value; //set elem value
				document.Scan.appendChild(NewHiddeninput); //add elem to form
				var AllValues = new Array(HowManyScans); //create array of scanned values
				var getTable=document.getElementById('tbl'); //get display table
				while(getTable.rows.length) { //Delete All Rows
					getTable.deleteRow(getTable.rows.length-1); 
				}
				for (i=1; i<=HowManyScans; i++){ //populate array with scanned values
					var elemName='CurrentValue'+i; //create name of next form elem anme
					var getelem=document.getElementById(elemName); //get form elem
					AllValues[i]=getelem.value; //put form elem value
				}
				DupeCheck.value=''; //reset duplicate 
				AllValuesSort = AllValues.sort(); //sort as string for display
				for (i=0; i<HowManyScans; i++){ //populate display table/rows
					DupeCheck.value=DupeCheck.value+'[delim]'+AllValuesSort[i]; //conc. values with silly delimeter! there has to be a better way to do this later using the form stack...
					var putRow=document.getElementById('tbl').insertRow(); //add row to didpaly table
					var putCell=putRow.insertCell(); //add cell to new row
					putCell.id=i; //set cell id error; this seems to be setting all rows/cells on every iteration!
					putCell.innerHTML='<span class="DataLabel">'+(i+1)+'. '+AllValuesSort[(i)]+'</span>'; //set cell text
					putCell.align = "center"; /set cell prop.
					putCell.onclick = function () { DeleteMe(this); }; //set cell event error; this seems to be setting thsi value on all cells on every iteration!
				}
				document.Scan.ScannedLabel.value=''; //empty main form elem
				document.Scan.ScannedLabel.focus(); //set cursor to main input elem
				}
				return;
			}

			function DeleteMe(WhichCell){ //remove form elem and display table row
				getCell=document.getElementById(WhichCell);
				alert(getCell.id);
			}
</script>

I've tried passing the row by id and the cell by id but get the same error either way.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Upvote 0 Downvote
Lyndon, there's a smattering of errors in your code, make the following changes:
(some are hard to see, look for the red)
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
    <title>Scan Bar Codes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<form name="Scan" action="ScanAction.cfm" method="post" onsubmit="return false">
    <input id="CurrentValue" name="CurrentValue" type="Hidden" value="0">
    <input name="ScanCount" type="Hidden" value="0">
    <input name="ScanList" id="ScanList" type="Hidden" value="">
    <table class="BinkleyTable" align="center">
        <tr>
            <td class="ColumnHeadingCell" colspan="2">
                <div align="center">Scan Bar Codes</div>
            </td>
        </tr>
        <tr>
            <td class="NormalCell" style="border-bottom: solid 1px DodgerBlue;" >
                <div align="right">Scan Label:</div>
            </td>
            <td class="NormalCell" style="border-bottom: solid 1px DodgerBlue;">
                <input type="Text" size="7" maxlength="7" name="ScannedLabel" onkeypress="return checkKey(event)"> <input type="Button" value="Save" onclick="this.form.submit()">
            </td>
        </tr>
        <tr>
            <td class="NormalCell" colspan="2" align="center" style="background: white;">
                <table id="tbl" width="100%" align="center" style="background: white;">
                    <tr id="0">
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

<script language="JavaScript" type="text/javascript">
        document.Scan.ScannedLabel.focus();
        function checkKey(event){
            var pK = document.all? event.keyCode:event.which; //
            if(pK==13) { //if CR/LF - reader device ends all transaction with chr(13)
                var DupeCheck=document.getElementById('ScanList');
                document.Scan.ScannedLabel.value=document.Scan.ScannedLabel.value.toUpperCase(); //Scanned Value to Upper Case
                if (DupeCheck.value.indexOf(document.Scan.ScannedLabel.value) > -1){ //if duplicate
                    alert('Label '+document.Scan.ScannedLabel.value+' has already beeen scanned');
                    document.Scan.ScannedLabel.value='';
                    document.Scan.ScannedLabel.focus();
                    return;
                } //else not duplicate
                var HowManyScans=document.Scan.ScanCount.value; //get prev scan count
                HowManyScans=++HowManyScans; //increment can count
                document.Scan.ScanCount.value=HowManyScans; //set scan count in form
                NewHiddeninput=document.createElement("input"); //create hidden form elem object to store scan value
                NewHiddeninput.id='CurrentValue'+HowManyScans; //set dynamic elem name
                NewHiddeninput.type='Hidden'; //set elem type
                NewHiddeninput.value=document.Scan.ScannedLabel.value; //set elem value
                document.Scan.appendChild(NewHiddeninput); //add elem to form
                var AllValues = new Array(HowManyScans); //create array of scanned values
                var getTable=document.getElementById('tbl'); //get display table
                while(getTable.rows.length) { //Delete All Rows
                    getTable.deleteRow(getTable.rows.length-1);
                }
                for (i=1; i<=HowManyScans; i++){ //populate array with scanned values
                    var elemName='CurrentValue'+i; //create name of next form elem anme
                    var getelem=document.getElementById(elemName); //get form elem
                    AllValues[i]=getelem.value; //put form elem value
                }
                DupeCheck.value=''; //reset duplicate
                AllValuesSort = AllValues.sort(); //sort as string for display
                for (i=0; i<HowManyScans; i++){ //populate display table/rows
                    DupeCheck.value=DupeCheck.value+'[delim]'+AllValuesSort[i]; //conc. values with silly delimeter! there has to be a better way to do this later using the form stack...
                    var putRow=document.getElementById('tbl').insertRow([!]i[/!]); //add row to didpaly table
                    var putCell=putRow.insertCell([!]0[/!]); //add cell to new row
                    putCell.id=i; //set cell id error; this seems to be setting all rows/cells on every iteration!
                    putCell.innerHTML='<span class="DataLabel">'+(i+1)+'. '+AllValuesSort[(i)]+'</span>'; //set cell text
                    putCell.align = "center"; [!]/[/!]/set cell prop.
                    putCell.onclick = function () { DeleteMe(this); }; //set cell event error; this seems to be setting thsi value on all cells on every iteration!
                }
                document.Scan.ScannedLabel.value=''; //empty main form elem
                document.Scan.ScannedLabel.focus(); //set cursor to main input elem
            }
            return;
        }

        function DeleteMe(WhichCell){ //remove form elem and display table row
            [!][s]getCell=document.getElementById(WhichCell);[/s][/!]
            alert([!]WhichCell.id[/!]);
        }
         
</script>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Very Nice.

I am curious how insertCell(0) is different from insertCell(0)?

On the MSDN site the refrence says: "Note By default, the insertCell method adds cells to the end of the collection, because it is faster to add a cell at the end of a row than somewhere in the middle." and "oCell = oRow.insertCell();" Link:
Anyway, I'm going now. Thanks to you both!



Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
635
malpa
malpa
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
561
Rayj0000
Rayj0000
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
737
Kennelbloke
Kennelbloke
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
176
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top