一个叫tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的格子,能不能求出这是第几列第几行?
一个叫tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的td格子,能不能求出这是第几列第几行? 或者说能不能求出stid所在行的行头(第一个td的内容)及所在列的列头??
[解决办法]
每个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>
<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>