Click here to Skip to main content
11,638,881 members (74,683 online)

JavaScript

 
Questionget the checkbox index or table row index with javascript Pin
osmanjan30-Aug-12 13:01
memberosmanjan30-Aug-12 13:01 
AnswerRe: get the checkbox index or table row index with javascript Pin
enhzflep30-Aug-12 13:26
memberenhzflep30-Aug-12 13:26 
GeneralRe: get the checkbox index or table row index with javascript Pin
osmanjan30-Aug-12 13:45
memberosmanjan30-Aug-12 13:45 
GeneralRe: get the checkbox index or table row index with javascript Pin
enhzflep30-Aug-12 14:36
memberenhzflep30-Aug-12 14:36 
GeneralRe: get the checkbox index or table row index with javascript Pin
osmanjan30-Aug-12 19:51
memberosmanjan30-Aug-12 19:51 
GeneralRe: get the checkbox index or table row index with javascript Pin
BobJanova30-Aug-12 22:48
memberBobJanova30-Aug-12 22:48 
GeneralRe: get the checkbox index or table row index with javascript Pin
enhzflep30-Aug-12 23:18
memberenhzflep30-Aug-12 23:18 
AnswerRe: get the checkbox index or table row index with javascript Pin
enhzflep30-Aug-12 23:24
memberenhzflep30-Aug-12 23: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>";
				}
			?>
Make it work. Then do it better - Andrei Straut

GeneralRe: get the checkbox index or table row index with javascript Pin
kmoorevs28-Sep-12 6:07
memberkmoorevs28-Sep-12 6:07 
Questionuse JQuery in C# code Pin
GSingh-Developer29-Aug-12 7:26
memberGSingh-Developer29-Aug-12 7:26 
AnswerRe: use JQuery in C# code Pin
jkirkerx29-Aug-12 8:01
memberjkirkerx29-Aug-12 8:01 
GeneralRe: use JQuery in C# code Pin
GSingh-Developer29-Aug-12 8:26
memberGSingh-Developer29-Aug-12 8:26 
GeneralRe: use JQuery in C# code Pin
jkirkerx29-Aug-12 9:49
memberjkirkerx29-Aug-12 9:49 
AnswerRe: use JQuery in C# code Pin
BobJanova30-Aug-12 0:18
memberBobJanova30-Aug-12 0:18 
GeneralRe: use JQuery in C# code Pin
jkirkerx30-Aug-12 7:34
memberjkirkerx30-Aug-12 7:34 
SuggestionText editor Pin
Nolee K28-Aug-12 2:57
memberNolee K28-Aug-12 2:57 
GeneralRe: Text editor Pin
Pete O'Hanlon28-Aug-12 3:06
protectorPete O'Hanlon28-Aug-12 3:06 
GeneralRe: Text editor Pin
BobJanova28-Aug-12 3:31
memberBobJanova28-Aug-12 3:31 
AnswerRe: Text editor Pin
Tadit Dash28-Aug-12 3:56
memberTadit Dash28-Aug-12 3:56 
GeneralRe: Text editor Pin
mark merrens28-Aug-12 9:41
membermark merrens28-Aug-12 9:41 
AnswerRe: Text editor Pin
Joan Murt28-Aug-12 10:00
memberJoan Murt28-Aug-12 10:00 
Questionautomatically checking a check box in a website. Pin
saadmechiche26-Aug-12 22:20
membersaadmechiche26-Aug-12 22:20 
AnswerRe: automatically checking a check box in a website. Pin
Shameel28-Aug-12 3:35
memberShameel28-Aug-12 3:35 
Questionmy function really slows down after 4 times Pin
jkirkerx26-Aug-12 16:34
memberjkirkerx26-Aug-12 16:34 
AnswerRe: my function really slows down after 4 times Pin
jkirkerx28-Aug-12 8:55
memberjkirkerx28-Aug-12 8:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    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.150728.1 | Last Updated 31 Jul 2015
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid