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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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