Display table cell values in textbox

Question

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 27-Aug-13 21:49pm

priyankavm

Add a Solution

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?

3 solutions

Solution 3

[SOLVED LINK]BEST ANSWER FROM ANICHANDRAN AYYASAMY

DEMO LINK

check this link i hope this will help you

check this link i hope this will help you

check this link i hope this will help you

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>

Posted 28-Jan-14 0:08am

aanichandran

Updated 28-Jan-14 0:23am

v4

Add a Solution

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

Shobhana.n · Accepted Answer · 2013-08-28T08:05:00

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

enhzflep · Accepted Answer · 2013-08-28T02:34:00

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'

Display table cell values in textbox

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0

Display table cell values in textbox

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us