Click here to Skip to main content
12,693,254 members (31,366 online)

JavaScript

 
QuestionProgress Bar Pin
Manish K. Agarwal31-Aug-12 4:33
memberManish K. Agarwal31-Aug-12 4:33 
AnswerRe: Progress Bar Pin
C-War1-Sep-12 5:50
memberC-War1-Sep-12 5:50 
GeneralRe: Progress Bar Pin
Manish K. Agarwal2-Sep-12 20:22
memberManish K. Agarwal2-Sep-12 20:22 
AnswerRe: Progress Bar Pin
twseitex2-Sep-12 9:24
membertwseitex2-Sep-12 9:24 
GeneralRe: Progress Bar Pin
Manish K. Agarwal2-Sep-12 20:51
memberManish K. Agarwal2-Sep-12 20:51 
GeneralRe: Progress Bar Pin
twseitex4-Sep-12 4:18
membertwseitex4-Sep-12 4:18 
Questionget the checkbox index or table row index with javascript Pin
osmanjan30-Aug-12 14:01
memberosmanjan30-Aug-12 14:01 
AnswerRe: get the checkbox index or table row index with javascript Pin
enhzflep30-Aug-12 14:26
memberenhzflep30-Aug-12 14:26 
GeneralRe: get the checkbox index or table row index with javascript Pin
osmanjan30-Aug-12 14:45
memberosmanjan30-Aug-12 14:45 
GeneralRe: get the checkbox index or table row index with javascript Pin
enhzflep30-Aug-12 15:36
memberenhzflep30-Aug-12 15:36 
GeneralRe: get the checkbox index or table row index with javascript Pin
osmanjan30-Aug-12 20:51
memberosmanjan30-Aug-12 20:51 
GeneralRe: get the checkbox index or table row index with javascript Pin
BobJanova30-Aug-12 23:48
memberBobJanova30-Aug-12 23:48 
GeneralRe: get the checkbox index or table row index with javascript Pin
enhzflep31-Aug-12 0:18
memberenhzflep31-Aug-12 0:18 
AnswerRe: get the checkbox index or table row index with javascript Pin
enhzflep31-Aug-12 0:24
memberenhzflep31-Aug-12 0:24 
Just like Bob said, the easiest/quickest way to get the index of the clicked row (in case you need the number for something else) is to add an attribute to the TR elements - you can then query this value in your onclick handler.

Drawing on the code I wrote earlier, here's a dynamic solution.

------------------ tblTest.php ----------------------
<!doctype html>
<html>
<head>
<script>

function myRowClickFunction()
{
	alert('row clicked');
}

function myBtnClicked()
{
	alert('btn clicked');
}

function rowClickedToggleCheckBox()
{
	/* this points to the clicked table row */
	var clickedRow = this;
	
	// get the first input item that's a child of the clicked row
	var checkBox = clickedRow.getElementsByTagName('input')[0];

	checkBox.checked = (!checkBox.checked);
	alert('Index of clicked row: ' + clickedRow.getAttribute('rowIndex'));
}


function addBtnToRow()
{
	// *** 'this' points to the row that was clicked ***
	
	// make a new table-cell element
	td = document.createElement('td');
	
	// make a new input element
	btnInput = document.createElement('input');
	btnInput.setAttribute('value', 'click me');
	btnInput.setAttribute('type', 'button');
	btnInput.onclick = myBtnClicked;
	
	// place the btn inside the new table cell
	td.appendChild(btnInput);

	// place this new cell inside the row that was clicked
	this.appendChild(td);
	
	// remove the onclick handler from the row, to prevent adding a button multiple times
	this.onclick = null;
}

// attach the specified function to the onclick event of all 'tr' elements in the document
function attachEventHandlerToTableRows(functionToAttach)
{
	var i, num;
	var tableRows = document.getElementsByTagName('tr');

	num = tableRows.length;
	for (i=0; i<num; i++)
	{
		tableRows[i].onclick = functionToAttach;
	}
}


// Sample onInit function.
// make sure you only use one function or the other here
function myInit()
{
	attachEventHandlerToTableRows(rowClickedToggleCheckBox);

	// the row will just tell us that we've clicked it
	//attachEventHandlerToTableRows(myRowClickFunction);
	
	// the row will add a cell that contains a button, whenever the row is clicked
	// try commenting out the above line of code and uncommenting this one instead
	//attachEventHandlerToTableRows(addBtnToRow);
}
</script>
</head>
<body onload='myInit();'>
	<table>
		<tbody>
			<?php
				for ($i=0; $i<10; $i++)
				{
					echo "<tr rowIndex='$i'><td><input type='checkbox' id='cb_$i'></td><td>click to toggle checkBox</td></tr>";
				}
			?>
		</tbody>
	</table>
</body>
</html>

Make it work. Then do it better - Andrei Straut

GeneralRe: get the checkbox index or table row index with javascript Pin
kmoorevs28-Sep-12 7:07
memberkmoorevs28-Sep-12 7:07 
Questionuse JQuery in C# code Pin
GSingh-Developer29-Aug-12 8:26
memberGSingh-Developer29-Aug-12 8:26 
AnswerRe: use JQuery in C# code Pin
jkirkerx29-Aug-12 9:01
memberjkirkerx29-Aug-12 9:01 
GeneralRe: use JQuery in C# code Pin
GSingh-Developer29-Aug-12 9:26
memberGSingh-Developer29-Aug-12 9:26 
GeneralRe: use JQuery in C# code Pin
jkirkerx29-Aug-12 10:49
memberjkirkerx29-Aug-12 10:49 
AnswerRe: use JQuery in C# code Pin
BobJanova30-Aug-12 1:18
memberBobJanova30-Aug-12 1:18 
GeneralRe: use JQuery in C# code Pin
jkirkerx30-Aug-12 8:34
memberjkirkerx30-Aug-12 8:34 
SuggestionText editor Pin
Nolee K28-Aug-12 3:57
memberNolee K28-Aug-12 3:57 
GeneralRe: Text editor Pin
Pete O'Hanlon28-Aug-12 4:06
protectorPete O'Hanlon28-Aug-12 4:06 
GeneralRe: Text editor Pin
BobJanova28-Aug-12 4:31
memberBobJanova28-Aug-12 4:31 
AnswerRe: Text editor Pin
Tadit Dash28-Aug-12 4:56
memberTadit Dash28-Aug-12 4:56 
GeneralRe: Text editor Pin
mark merrens28-Aug-12 10:41
membermark merrens28-Aug-12 10:41 
AnswerRe: Text editor Pin
Joan Murt28-Aug-12 11:00
memberJoan Murt28-Aug-12 11:00 
Questionautomatically checking a check box in a website. Pin
saadmechiche26-Aug-12 23:20
membersaadmechiche26-Aug-12 23:20 
AnswerRe: automatically checking a check box in a website. Pin
Shameel28-Aug-12 4:35
memberShameel28-Aug-12 4:35 
Questionmy function really slows down after 4 times Pin
jkirkerx26-Aug-12 17:34
memberjkirkerx26-Aug-12 17:34 
AnswerRe: my function really slows down after 4 times Pin
jkirkerx28-Aug-12 9:55
memberjkirkerx28-Aug-12 9:55 
Questiontrouble using each in json array Pin
jkirkerx23-Aug-12 13:56
memberjkirkerx23-Aug-12 13:56 
AnswerRe: trouble using each in json array Pin
BobJanova23-Aug-12 23:47
memberBobJanova23-Aug-12 23:47 
GeneralRe: trouble using each in json array Pin
jkirkerx24-Aug-12 7:32
memberjkirkerx24-Aug-12 7:32 
QuestionHow to calculate difference between two date Pin
Robymon22-Aug-12 0:11
memberRobymon22-Aug-12 0:11 
AnswerRe: How to calculate difference between two date Pin
BobJanova22-Aug-12 1:33
memberBobJanova22-Aug-12 1:33 
QuestionHow to add Days in variable Date Pin
Robymon21-Aug-12 22:40
memberRobymon21-Aug-12 22:40 
AnswerRe: How to add Days in variable Date Pin
Pete O'Hanlon21-Aug-12 23:26
protectorPete O'Hanlon21-Aug-12 23:26 
Questionget all image file names from a folder in Jquery Pin
ashjassi19-Aug-12 20:33
memberashjassi19-Aug-12 20:33 
Questionintegrate bidichecker to awebsite Pin
nada200615-Aug-12 18:42
membernada200615-Aug-12 18:42 
Questioneither my css or Javscript is in error, another set of eyes Pin
jkirkerx15-Aug-12 14:19
memberjkirkerx15-Aug-12 14:19 
AnswerRe: either my css or Javscript is in error, another set of eyes Pin
jkirkerx15-Aug-12 17:32
memberjkirkerx15-Aug-12 17:32 
AnswerRe: either my css or Javscript is in error, another set of eyes Pin
BobJanova16-Aug-12 0:36
memberBobJanova16-Aug-12 0:36 
QuestionDisplay Values Pin
lakshmiblp15-Aug-12 11:29
memberlakshmiblp15-Aug-12 11:29 
Questionhow to get default signature in outlook using Javascript Pin
anurag34879-Aug-12 3:20
memberanurag34879-Aug-12 3:20 
AnswerRe: how to get default signature in outlook using Javascript Pin
Pete O'Hanlon9-Aug-12 4:52
protectorPete O'Hanlon9-Aug-12 4:52 
AnswerRe: how to get default signature in outlook using Javascript Pin
BobJanova9-Aug-12 4:56
memberBobJanova9-Aug-12 4:56 
Newsurdu Pin
sania habib8-Aug-12 16:47
membersania habib8-Aug-12 16:47 
GeneralRe: urdu Pin
Richard MacCutchan8-Aug-12 22:28
mvpRichard MacCutchan8-Aug-12 22:28 
AnswerRe: urdu Pin
Rahul Rajat Singh22-Aug-12 2:24
memberRahul Rajat Singh22-Aug-12 2:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.


Advertise | Privacy | Mobile
Web01 | 2.8.170118.1 | Last Updated 18 Jan 2017
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid