在文本框中显示表格单元格值 [英] Display table cell values in textbox
本文介绍了在文本框中显示表格单元格值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经写了javascript到onclick表的事件，
表示当我们点击表格的任何一行时，特定的单元格值将通过使用以下代码显示在文本框中：
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 :
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;
}
适用于Internet Explorer但不适用于Mozilla&谷歌Crome我也检查了javascript设置......任何人都可以帮忙??
It works on Internet explorer But not on Mozilla & Google Crome I have also checked javascript settings... can any one help??
推荐答案
嗨朋友，
请尝试以下代码，因为mozlla，chrome无法理解.cells（0）我将它们替换为getval（）函数中的.cells [0] ....
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....
function list() {
var tbl = document.getElementById("tblMain");
if (tbl != null) {
for (var i = 0; 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;
}
你真的应该熟悉浏览器的调试器。
打开调试器会告诉你你的getVal函数有问题。
在其中，你使用术语：row.cells（0）.innerHTML- 唯一的问题是cells对象是一个数组 - 而不是一个函数。即，当你传递一个0的变量并要求它来计算引用哪个单元格并返回对它的引用。它不会那样 - 你只需要告诉 javascript引擎你想要的元素元素。
这是一个完整的例子：
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:
<!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>
注意：因为事件处理程序是通过附加的以这种方式编写代码，我们可以访问一个特殊的变量 this 它指的是附加了事件处理程序的对象。这就是为什么我可以在click处理程序中使用this关键字 - 处理程序附加到表的每一行。运行时，onRowClick的此指向被点击的行。
按照您的方式附加活动缺点。
（1）你需要使用'垫片'功能
即
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
function () {
getval(this);
};
（2）每次分配这样的事件时，它都会替换已连接到的所有处理程序那个元素（你需要使用addEventListener将超过1个func附加到一个元素）
（3）你不能一次删除一个处理程序 - 它是all-or-nuthin'
(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'
[求助链接]来自ANICHANDRAN AYYASAMY的最佳答案
< b> DEMO LINK
[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
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;
}
<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>
(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);
};
}
})();
<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>这篇关于在文本框中显示表格单元格值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
