Click here to Skip to main content
15,850,548 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have written javascript to onclick event of table,
means when we click on any row of table that particular cell value will be displayed in textbox by using following code :

C#
function list() {
      var tbl = document.getElementById("tblMain");
      if (tbl != null) {
          for (var i = 1; i < tbl.rows.length; i++) {
              for (var j = 0; j < tbl.rows[i].cells.length; j++)
                  tbl.rows[i].ondblclick =function () {
                      getval(this);
              };
          }
      }

      function getval(row) {
          document.getElementById("txtDsCode").value = row.cells(0).innerHTML;
           document.getElementById("txtDsName").value = row.cells(1).innerHTML;

         }


It works on Internet explorer But not on Mozilla & Google Crome I have also checked javascript settings... can any one help??
Posted
Comments
John-ph 28-Aug-13 4:15am    
Do you have fiddler to debug your JavaScript code? if not install it and check what's wrong in Mozilla. Are you not using JQuery?

Hi Friend,

Please try bellow code,As mozlla,chrome are not able to understand .cells(0) I replaced them to .cells[0] in getval() function....


JavaScript
function list() {  
  var tbl = document.getElementById("tblMain");
  if (tbl != null) {
	  for (var i = 0; i &lt; tbl.rows.length; i++) {
		  for (var j = 0; j &lt; tbl.rows[i].cells.length; j++)
			  tbl.rows[i].ondblclick =function () {
				  getval(this);
		  };
	  }
	} 
}
 
function getval(row) {
  document.getElementById("txtDsCode").value = row.cells[0].innerHTML;
  document.getElementById("txtDsName").value = row.cells[1].innerHTML;
}
 
Share this answer
 
v2
Comments
priyankavm 29-Aug-13 0:44am    
Thank you very much.............
Shobhana
Shobhana.n 29-Aug-13 1:02am    
Your Welcome :)
You really should become familiar with your browsers' debugger.
Opening up the debugger would have shown you that there's a problem with your getVal function.

In it, you use the term: row.cells(0).innerHTML - only problem is that the cells object is an array - not a function. I.e at the moment you're passing it a variable of 0 and asking it to calculate which cell that refers to and return a reference to it. It doesn't work like that - you just need to tell the javascript engine which element of the cells array you'd like.

Here's a fully worked example:

HTML
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}

window.addEventListener('load', mInit, false);

function mInit()
{
	var myTable = makeTable(5, 5, 'tblMain');
	var i, n, curRow;
	
	n = myTable.rows.length;
	for (i=0; i<n; i++)
		myTable.rows[i].addEventListener('click', onRowClick, false);
	
	byId('tableHolder').appendChild(myTable);
}

function onRowClick(e)
{
	var value1, value2;
	value1 = this.cells[0].innerHTML;
	value2 = this.cells[1].innerHTML;
	byId('output1').value = value1;
	byId('output2').value = value2;
}

function makeTable(nCols, nRows, idTxt)
{
	var x, y, curRow, curCell, tbl = newEl('table');
	tbl.setAttribute('id', idTxt);
	for (y=0; y<nRows; y++)
	{
		curRow = tbl.insertRow();
		for (x=0; x<nCols; x++)
		{
			curCell = curRow.insertCell();
			curCell.innerHTML = "Cell: ["+ (nCols-x) +","+ (nRows-y) +"]";
		}
	}
	return tbl;
}
</script>
<style>
</style>
</head>
<body>
	<div id='tableHolder'></div>
	<input id='output1' />
	<br>
	<input id='output2' />
</body>
</html>


Note: because the event handlers are attached via code in this manner, we have access to a special variable, this It refers to the object that has the event handler attached to it. That's why I can use the this keyword in the click handler - the handler is attached to each row of the table. When run, onRowClick's this points to the row that was clicked.

Attaching the event as you have has a number of disadvantages.
(1) You need to use a 'shim' function
i.e
JavaScript
function () {
    getval(this);
};


(2) Each time you assign an event like this, it replaces any and all handlers already attached to that element (you need to use addEventListener to attach more than 1 func to an element)

(3) You can't remove a single handler at a time - it's all-or-nuthin'
 
Share this answer
 
Comments
priyankavm 29-Aug-13 0:45am    
Thanks........enhzflep
[SOLVED LINK]BEST ANSWER FROM ANICHANDRAN AYYASAMY

DEMO LINK


CSS
th,tr
{
    width:100px;
    height:10px;
    background:#ddd;
 }
th
{
    background:green;
}
#form,#myTable
{
 width:100%;
 background:#ddd;  
 margin:0px auto;
  border:1px solid orange;
}
input
{
 background:#fff; 
 border:1px solid ddd;
}
input[type="submit"]
{
 background:eee; 
 border:1px solid orange;
  font-weight:bold;
  border-radius:5px;
 color:red;
}
#left
{
  text-align:right;
}


HTML
<form action="" method="" >
  
<table id="form" cellspacing="1">
  <tr width="100%"><th colspan="2" >php listview - anichandran</th></tr>
   <tr>
   <td id="left">  Firstname is:</td>
  <td><input type="text" id="firstname" /></td>
   </tr>
  <tr>
   <td id="left">Lastname is:</td>
  <td><input type="text" id="lastname" /></td>
   </tr>
   <tr>
   <td id="left">Age is:</td>
  <td><input type="text" id="age" /></td>
   </tr>
   <tr>
   <td id="left">Total is:</td>
  <td><input type="text" id="total" /></td>
   </tr>
     <tr>
   <td id="left">Discount is:</td>
  <td><input type="text" id="discount" /></td>
   </tr>
   <tr>
   <td id="left">Diff is:</td>
  <td><input type="text" id="diff" /></td>
   </tr>
  <tr><td></td>
  <td colspan="2"><input type="submit" value="Submit"  /><input type="submit" value="Reset" /></td>
   </tr>
  </table>

</form>


<table id="myTable" cellspacing="1" style="height:15px;overflow:scroll;">
    <thead>
        <tr>
            <th>first name</th>
            <th>last name</th>
            <th>age</th>
            <th>total</th>
            <th>discount</th>
            <th>diff</th>
        </tr>
    </thead>
        <tr>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>9.99</td>
            <td>20.3%</td>
            <td>+3</td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>19.99</td>
            <td>25.1%</td>
            <td>-7</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>15.89</td>
            <td>44.2%</td>
            <td>-15</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>153.19</td>
            <td>44%</td>
            <td>+19</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>56</td>
            <td>153.19</td>
            <td>23%</td>
            <td>+9</td>
        </tr>
  <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>15.89</td>
            <td>44.2%</td>
            <td>-15</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>153.19</td>
            <td>44%</td>
            <td>+19</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>56</td>
            <td>153.19</td>
            <td>23%</td>
            <td>+9</td>
        </tr>
</table>    

JavaScript
(function () {
    if (window.addEventListener) {
        window.addEventListener('load', run, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', run);
    }

    function run() {
        var t = document.getElementById('myTable');
        t.onclick = function (event) {
            event = event || window.event; //IE8
            var target = event.target || event.srcElement;
            while (target && target.nodeName != 'TR') { // find TR
                target = target.parentElement;
            }
            //if (!target) { return; } //tr should be always found
            var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement
            //var cells = target.getElementsByTagName('td'); //alternative
            if (!cells.length || target.parentNode.nodeName == 'THEAD') {
                return;
            }
            var f1 = document.getElementById('firstname');
            var f2 = document.getElementById('lastname');
            var f3 = document.getElementById('age');
            var f4 = document.getElementById('total');
            var f5 = document.getElementById('discount');
            var f6 = document.getElementById('diff');
            f1.value = cells[0].innerHTML;
            f2.value = cells[1].innerHTML;
            f3.value = cells[2].innerHTML;
            f4.value = cells[3].innerHTML;
            f5.value = cells[4].innerHTML;
            f6.value = cells[5].innerHTML;
            //console.log(target.nodeName, event);
        };
    }

})();


XML
<b>DEMO LINK</b>
<div style="border:1px solid #ddd;width:100%;height:100%;">
<a href="http://jsfiddle.net/anichandran/Xp54u/10/">check this link  i hope this will help you</a><br>
<a href="http://extjs2u.blogspot.in/2014/01/php-listview-live-preview-anichandran.html">check this link  i hope this will help you</a><br>
<a href="codepen.io/anichandran/details/CuEjF">check this link  i hope this will help you</a><br>
</br></br></br></div>
 
Share this answer
 
v4

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900