웹 프론트엔드
HTML 튜토리얼
一个叫tb的table,有n行m列，每行里面有m个td,现在点击了一个id叫stid的格子，能不能求出这是第几列第几行？_html/css_WEB-ITnose
一个叫tb的table,有n行m列，每行里面有m个td,现在点击了一个id叫stid的格子，能不能求出这是第几列第几行？_html/css_WEB-ITnose
一个叫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/火狐/谷歌都有用你再试试
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7569
15
1386
52
87
11
61
19
28
107
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
