Maison > Article > interface Web > 一个叫tb的table,有n行m列，每行里面有m个td,现在点击了一个id叫stid的格子，能不能求出这是第几列第几行？_html/css_WEB-ITnose
一个叫tb的table,有n行m列，每行里面有m个td,现在点击了一个id叫stid的格子，能不能求出这是第几列第几行？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:20:111550parcourir
一个叫tb的table,有n行m列，每行里面有m个td,现在点击了一个id叫stid的td格子，能不能求出这是第几列第几行？ 或者说能不能求出stid所在行的行头（第一个td的内容)及所在列的列头？？
回复讨论(解决方案)
我用S('#stid').coloumn.header试了不行
每个td中加个隐藏域应该可以解决问题，就是感觉方法不是很好，不知js中有没有现成的东西。
貌似没有现成的方法取，你可以在拼table的时候给td个标识来取
可以，$("#stid").parent().index(),这是id叫stid的td所在行的索引值，可以得到第几行，
同样的，$("#stid").index()可以的到这个td列的索引值，从而得到第几列
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> td { height: 30px; width: 50px; text-align: center; border: 1px solid #333333; } </style></head><body> <div> <table id="tb"> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> <td> 7 </td> </tr> <tr> <td> 8 </td> <td> 9 </td> <td> 10 </td> <td> 11 </td> <td> 12 </td> <td> 13 </td> <td> 14 </td> </tr> <tr> <td> 15 </td> <td> 16 </td> <td> 17 </td> <td> 18 </td> <td> 19 </td> <td> 20 </td> <td> 21 </td> </tr> <tr> <td> 22 </td> <td> 23 </td> <td> 24 </td> <td> 25 </td> <td> 26 </td> <td> 27 </td> <td> 28 </td> </tr> <tr> <td> 29 </td> <td> 30 </td> <td> 31 </td> <td> 32 </td> <td> 33 </td> <td> 34 </td> <td> 35 </td> </tr> <tr> <td> 36 </td> <td> 37 </td> <td> 38 </td> <td> 39 </td> <td> 40 </td> <td> 41 </td> <td> 42 </td> </tr> </table> </div></body></html><script type="text/javascript"> var Table = document.getElementById("tb"); for (var i = 0; i < Table.rows.length; i++) { for (var j = 0; j < Table.rows[i].cells.length; j++) { Table.rows[i].cells[j].onclick = function () { var Table = document.getElementById("tb"); for (var i = 0; i < Table.rows.length; i++) { for (var j = 0; j < Table.rows[i].cells.length; j++) { if (this.innerText == Table.rows[i].cells[j].innerText) { alert(" 该TD的值为：" + this.innerText + " 行数为：" + i + " 列数为" + j + " 第一行的值为:" + Table.rows[i].cells[0].innerText); } } } } } }</script> 希望能帮助楼主，纯JS的代码
JavaScript code?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990……
谢谢，好像有问题，点击值undefined,并且循环了列
你用的什么浏览器啊，我用IE8/谷歌都没问题
你用的什么浏览器啊，我用IE8/谷歌都没问题
360
你用的什么浏览器啊，我用IE8/谷歌都没问题
错了，是360没问题，火狐是undefined，郁闷，这么不兼容
<script type="text/javascript"> var bl = true; if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { bl = false; } var Table = document.getElementById("tb"); for (var i = 0; i < Table.rows.length; i++) { for (var j = 0; j < Table.rows[i].cells.length; j++) { Table.rows[i].cells[j].onclick = function () { var Table = document.getElementById("tb"); for (var i = 0; i < Table.rows.length; i++) { for (var j = 0; j < Table.rows[i].cells.length; j++) { if (bl) { if (this.innerText == Table.rows[i].cells[j].innerText) { alert(" 该TD的值为：" + this.innerText + " 行数为：" + i + " 列数为" + j + " 第一行的值为:" + Table.rows[i].cells[0].innerText); } } else { var CText = innerText(this); var TableText = innerText(Table.rows[i].cells[j]); if (CText == TableText) { alert(" 该TD的值为：" + CText + " 行数为：" + i + " 列数为" + j + " 第一行的值为:" + innerText(Table.rows[i].cells[0])); } } } } } } } function innerText(node) {//返回的是数组类型 var innerTextArr = []; var root = node; var getChild = function (node) { var childs = node.childNodes; for (var i = 0; i < childs.length; i++) if (childs[i].nodeType == 3) innerTextArr.push(childs[i].nodeValue); else if (childs[i].nodeType == 1) { getChild(childs[i]); } } getChild(root); return innerTextArr[0].replace("\n", "").replace(/[ ]/g, "").replace("\n", ""); }</script> 搞定兼容性了IE8/火狐/谷歌都有用你再试试
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：求助一个新浪微博oathu2.0的问题？？_html/css_WEB-ITnoseArticle suivant：怎样用CSS在table中设置浮动层_html/css_WEB-ITnose