Home >Web Front-end >HTML Tutorial >A table called tb has n rows and m columns, and there are m tds in each row. Now I click on a grid with an ID called stid. Can I find out which column and row it is? _html/css_WEB-ITnose
A table called tb has n rows and m columns, and there are m tds in each row. Now I click on a grid with an ID called stid. Can I find out which column and row it is? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:20:111577browse
A table called tb has n rows and m columns, and there are m TDs in each row. Now I click on a TD grid with an ID called stid. Can I find out which column and row it is? Or can we find the header of the row where stid is located (the content of the first td) and the column header of the column? ?
Reply to discussion (solution)
I tried using S('#stid').coloumn.header but it didn’t work
In each td Adding a hidden field should solve the problem, but I think the method is not very good. I wonder if there is anything ready-made in js.
There seems to be no ready-made method to retrieve it. You can give td an identifier when typing the table to retrieve it.
Yes, $("#stid").parent().index(), This is the index value of the row where the td with the ID name stid is located. You can get the row number.
Similarly, $("#stid").index() can get the index value of the td column, so you can get the row number. Column
<!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> Hope it can help the poster, pure JS code
JavaScript code?123456789101112131415161718192021222324252627282930313233343536373839 40414243445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990... Looped List
What browser are you using? I have no problem using IE8/Google.
360
Wrong, 360 is no problem, Firefox is undefined, frustrating, so incompatible
<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> Now that the compatibility is working with IE8/Firefox/Google, you can try again