首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

一个喊tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的格子,能不能求出这是第几列第几行

2013-07-09 
一个叫tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的格子,能不能求出这是第几列第几行?一

一个叫tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的格子,能不能求出这是第几列第几行?
一个叫tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的td格子,能不能求出这是第几列第几行? 或者说能不能求出stid所在行的行头(第一个td的内容)及所在列的列头??一个喊tb的table,有n行m列,每行里面有m个td,现在点击了一个id叫stid的格子,能不能求出这是第几列第几行

[解决办法]
每个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的代码
[解决办法]
你用的什么浏览器啊,我用IE8/谷歌都没问题
[解决办法]
<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/火狐/谷歌都有用你再试试

热点排行