Re: get the checkbox index or table row index with javascript - JavaScript Discussion Boards

how i do check the checkbox on tablerow by clicking datarow.for example in xampp phpmyadmin اسلام پیروز است
Sign In·Permalink

If you need the row index, it's a good idea to stash it in the element, e.g.

<table>
<tr><th>... (header row)</tr>
<tr rowid=0><td>... </tr>
<tr rowid=1><td>... </tr>
</table>

(I'm not sure if you can use tBodies[0].rows.indexOf or something like that. I'm not an expert in this regard. But what you usually want is actually a row id which can be tied into the query you are running, and that won't be the same as the index anyway.)

If you know the checkbox is in the same row, though, you don't need the index to adjust it.

function rowOnClickHandler(evt){
 var row = evt.target ? evt.target : evt.srcElement; // IE compatibility
 var checkbox = row.cells[0].getElementsByTagName('INPUT')[0];
 checkbox.selected = !checkbox.selected;
}

Good answer. +5 Make it work. Then do it better - Andrei Straut
Sign In·Permalink

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

Beautiful! I can think of many places where this would be useful. Bravo on your explanation and great example! Clean, concise, and well documented. I don't usually get to do too much web development, but just spent a week immersed in it adding features to a legacy ASP application. It never fails to amaze me how much can be handled on the clent side. I think you might only be limited by your imagination.

"Go forth into the source" - Neal Morse

		9,893,272 members (27,270 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using