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 Smile | :)

اسلام پیروز است

You should have a look at line 522 of functions.js

If you right-click a table-row with Chrome or Opera, you can then select Inspect Element.
This will open the Dev Tools console. with the table-row still selected, you can then open the Event Listeners entry in the accordian. When I did this, I saw that the code for handling mouse-clicks on table-rows was to be found on line 522 of functions.js

With that done, one can see that the function basically looks for all any child elements of the row of type 'input' it then does some logic checking before checking/unchecking the checkbox.

Here's the function for reference. (I've marked what was line 522 with *****)

JavaScript

/**
 * This array is used to remember mark status of rows in browse mode
 */
var marked_row = new Array;

/**
 * enables highlight and marking of rows in data tables
 *
 */
function PMA_markRowsInit() {
    // for every table row ...
    var rows = document.getElementsByTagName('tr');
    for ( var i = 0; i < rows.length; i++ ) {
        // ... with the class 'odd' or 'even' ...
        if ( 'odd' != rows[i].className.substr(0,3) && 'even' != rows[i].className.substr(0,4) ) {
            continue;
        }
        // ... add event listeners ...
        // ... to highlight the row on mouseover ...
        if ( navigator.appName == 'Microsoft Internet Explorer' ) {
            // but only for IE, other browsers are handled by :hover in css
            rows[i].onmouseover = function() {
                this.className += ' hover';
            }
            rows[i].onmouseout = function() {
                this.className = this.className.replace( ' hover', '' );
            }
        }
        // Do not set click events if not wanted
        if (rows[i].className.search(/noclick/) != -1) {
            continue;
        }

/******************************************************************
 The code below was line 522 - it handles the clicking on the table row
the other code is for setup/assorted functionality of the table
******************************************************************/
        // ... and to mark the row on click ...
        rows[i].onmousedown = function() {
            var unique_id;
            var checkbox;

            checkbox = this.getElementsByTagName( 'input' )[0];
            if ( checkbox && checkbox.type == 'checkbox' ) {
                unique_id = checkbox.name + checkbox.value;
            } else if ( this.id.length > 0 ) {
                unique_id = this.id;
            } else {
                return;
            }

            if ( typeof(marked_row[unique_id]) == 'undefined' || !marked_row[unique_id] ) {
                marked_row[unique_id] = true;
            } else {
                marked_row[unique_id] = false;
            }

            if ( marked_row[unique_id] ) {
                this.className += ' marked';
            } else {
                this.className = this.className.replace(' marked', '');
            }

            if ( checkbox && checkbox.disabled == false ) {
                checkbox.checked = marked_row[unique_id];
            }
        }

        // ... and disable label ...
        var labeltag = rows[i].getElementsByTagName('label')[0];
        if ( labeltag ) {
            labeltag.onclick = function() {
                return false;
            }
        }
        // .. and checkbox clicks
        var checkbox = rows[i].getElementsByTagName('input')[0];
        if ( checkbox ) {
            checkbox.onclick = function() {
                // opera does not recognize return false;
                this.checked = ! this.checked;
            }
        }
    }
}
window.onload=PMA_markRowsInit;

Make it work. Then do it better - Andrei Straut

Thanks enhzflep !
But How i do it with PHP

اسلام پیروزاست.اسلامنا غالب

You're welcome. Smile | :)

Well, you can't do it with PHP. That is to say, PHP is only good for performing calculations before outputting to a web-browser.

You can't do it with the keyboard, since the keyboard just allows you to create the page that is then displayed. Well, for the purpose of this discussion, PHP works just like the keyboard, except a little faster.

So, where does that leave you if you want to create a page with PHP and have it behave in the same way?

Well, you simply put the appropriate javascript into a js file. You then link that file to the html output, with a
<script src='......'></script> tag.

You can see from the last line of the code I posted, that the onload function for the document calls a function which attaches an event handler to each of the table-rows in the page.

So, you could put the function into the javascript file.
You can link that file to the output of the PHP
You can call the function either with <body onload='yourInitFunc();'> in the html
or with window.onload = yourInitFunc; in the javascript.

Presumably, you're assembling the page in PHP perl-style, I.e you're using print, printf or echo to output each line of content as you go. In that case, you just output the required tags with a print statement at the appropriate place.

If on the other hand, you're using DOM objects to construct the page - then you'll need to create the script node & set it's src attribute to point to the javascript file.

To be perfectly honest, if I was in your shoes then I'd just make a quick html file that did nothing but try to attach a function to the onclick event of each of the table rows.
Okay, I got bored - have a play around with this. Make it work the way you'd like, then output the file dynamically, instead of with the keyboard (or in your case, copy/paste)

JavaScript

<!doctype html>
<html>
<head>
<script>

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

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

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()
{
	// 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>
			<tr><td>This is row 1</td></tr>
			<tr><td>This is row 2</td></tr>
			<tr><td>This is row 3</td></tr>
			<tr><td>This is row 4</td></tr>
			<tr><td>This is row 5</td></tr>
		</tbody>
	</table>
</body>
</html>

Make it work. Then do it better - Andrei Straut

OKAY my friend!!!
but how i get the row index and if i give a checkbox on first td how i change the checkbox state on tr click ?
i create checkboxes dynamically on webpage with php .

HELP ME!!!! Confused | :confused:

اسلام پیروزاست.اسلامنا غالب

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. Thumbs Up | :thumbsup:

+5

Make it work. Then do it better - Andrei Straut

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 ----------------------

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

Hi, I want to make ref of jquery.js through c# code and then want to create a function in C# to which i want to pass object as parameter. That function will do tasks that JQuery do. f.g Button as object and do animations on button using Jquery with C#(function). Thanks in advance.

I don't quite understand what you want to do.

1. Reference jquery in your webform
2. Create a function in code behind
3. code behind function passes parameters to a jquery script
4. Jquery then runs the parameters

I think you need to change your thinking on this.

Jquery can go to the server to get parameters.
Code Behind can prepare parameters on page load, then jquery can read them.
Something has to trigger a jquery function.

jquery is essentially javascript, just a little easier to pick up at first.

You really need to get started first, and learn how to use javascript before you dive into jquery, start below.

http://jquery.com/[jquery^]

Hi, I am an intermediate user with JQuery.
Actually I want to create a class in c# that will handle Jquery functionality.
My purpose regarding this is :
1> If someone dont know jquery then one can use my C# funtions for animation or other tasks that jquery has. My class will call jquery functions and ll return output.
2> Easy to debug the code using vs-degugger.

I write server control dll's, in which I embed scripts, and load the appropriate ones on demand, during the page.init life cycle. And then I create controls, that wire up to the scripts. When the page loads, everything is functional.

If you just had a pin-point question, with a code sample, then that's easy to answer, but in your case, your looking for someone to engineer it for you, and I don't think a class is sufficient for your needs.

I don't have an answer to offer, because I think the concept is flawed, or it exist on a super advanced level of programming.

I don't think you understand how ASP.net works. This isn't entirely your fault because ASP.net does its best to hide the client/server nature of websites.

Back end (C#) code is executed on the server. Its purpose is to generate markup which is sent to the browser, which can include scripts and links to scripts (e.g. jQuery). Once a request has been handled and markup sent back to the browser, your back end code is not running any more.

jQuery (like other JavaScript code) is run in the browser, and allows you to modify what the client sees or does. Anything interactive that happens in the browser is done with JS.

The only ways to communicate between them are HTTP requests, either through loading a new page with an <a> or <form action=...> tag, or via an AJAX request.

Animation is a client side task and therefore it will always be done with JavaScript. There is simply no (sane) way to get back end code involved in that code cycle, because the animation is done in the browser and the server is not involved.

That's a good explanation you wrote there Bob.

I guess he wants to write a class in which if you want to animate an object, you just call his class and the object, and he does the rest.

I don't think just a class is big enough for that, so he's needs some serious engineering there on how to build it.

You and I could actually write something like that, but I don't have a need for that at this moment in time.

But I have my thinking cap on now, and if I needed it today, I would attempt to write a jquery plugin, that you just attach to the object, to call the simple animations needed by the user.

So that's the answer, write a jquery plugin then. I forget the OP's Name, so OP, I'd leave the asp.net out of this, and look into writing a plugin.

Here's a link with some sample code to get you started today!

http://docs.jquery.com/Plugins/Authoring[^]

I am building a project managent information system and I need a texteditor in some of my pages. How do i go about having it work in my application.

First you find one that fits your purposes, then you download it and add any components/JavaScript references/CSS files that it needs. Finally, you add it to your page and call any initialisation routines.

That's as specific as I can get right now. The editor you include should have samples and documentation that show how to add it into your site.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

CodeStash - Online Snippet Management | My blog | MoXAML PowerToys | Mole 2010 - debugging made easier

<textarea> Smile | :)

Please check 20 Excellent Free Rich-Text Editors[^].
Check Rich Text Editor (for textareas)[^] for a simpler one with demo.

Thanks...

My 1st Tip/Trick
File Download from the GridView rows in asp.net 4.0

This[^] is an easy one to implement.

"If you think it's expensive to hire a professional to do the job, wait until you hire an amateur." Red Adair.
nils illegitimus carborundum

me, me, me

Take a look at this link: http://www.tinymce.com/[^].

I've used it and it works fast and easy.

Good luck!

[www.tamautomation.com] Robots, CNC and PLC machines for grinding and polishing.

Hello ,

here is my issue , I would like to be able to set a checkbox named mycheckbox to yes by inserting a script in an external webpage.
let's say i want this check box to be check when i execute the code in the website:
www.somewebsite.com

Many thanks.

JavaScript

document.getElementById("mycheckbox").checked = true;

I wrote this, and after changing the value of the dropdown like 20 times, I noticed the function got slower and slower until I was not able to select a value after about 6 times. I tried optimizing it, it was 3 times, now 6.

Not quite sure where I dropped the ball at here, or what is consuming large amounts or resources.

So instead of going back to the server to get fresh values, I just took them from the html in the option list of the dropdownlist, and parsed out the values I wanted.

Anyways, any insight would be appreciated.

$('[id*="_ddl_EstimateShipping_RateAPICode"]').change(function () {
        
   var option_Textline = $(this).find(":selected").text();
   if (option_Textline != "") {

      // Parse the option_Textline
      var n = option_Textline.indexOf("--");
      var option_RateName = option_Textline.substring(0, n).trim();
      var option_RatePrice = option_Textline.substring(n + 2, option_Textline.length).trim();

      // Strip all the alpha-numeric chars from the value
      option_RatePrice = parseFloat(option_RatePrice.replace(/[A-Za-z$-]/g, ""));

            $('[id*="_lbl_Information_ShipRatePlan"]').text(option_RateName);
            $('[id*="_lbl_Information_ShipRatePrice"]').text("$" + option_RatePrice);

      // Update the Estimated Shopping Cart Totals
      var n_ProductTotals = $('[id*="_txt_Helper_ProductTotals_Field"]').val();
      var o_PromoDiscount = $('[id*="_lbl_PromoCode"]').text();
      var o_GCertificate = $('[id*="_lbl_SubTotals_GiftCertificates"]').text();
      var o_SalesTax = $('[id*="_lbl_SubTotals_SalesTax"]').text();

      o_PromoDiscount = parseFloat(o_PromoDiscount.replace(/\$/g, "").replace(/\-/g, ""));
      o_GCertificate = parseFloat(o_GCertificate.replace(/\$/g, "").replace(/\-/g, ""));
      o_SalesTax = parseFloat(o_SalesTax.replace(/\$/g, ""));

      var n_SubTotal = parseFloat(n_ProductTotals - parseFloat(o_PromoDiscount));
      var n_GrandTotal = parseFloat(parseFloat(n_SubTotal) + parseFloat(option_RatePrice) + parseFloat(o_SalesTax) - parseFloat(o_GCertificate));

      if (!isNaN(n_SubTotal)) {
          //n_SubTotal = Math.round(n_SubTotal * 100) / 100
          $('[id*="_lbl_DisplayShoppingCart_SubTotals_SubTotal"]').text("$" + n_SubTotal.toFixed(2));
      }

      if (!isNaN(option_RatePrice)) {
          //option_RatePrice = Math.round(option_RatePrice * 100) / 100
          $('[id*="_lbl_SubTotals_Shipping"]').text("$" + option_RatePrice.toFixed(2));
            }

      if (!isNaN(n_GrandTotal)) {
          //n_GrandTotal = Math.round(n_GrandTotal * 100) / 100
          $('[id*="_lbl_SubTotals_GrandTotal"]').text("$" + n_GrandTotal.toFixed(2));
      }
  }

    });

    return false;
    
}

Well after much diagnosing and more optimizing, the function I posted has nothing to due with the slowness.

Other dropdownlist are doing the same thing as well, even on other pages. Maybe I just need to reboot my computer an clean things up