Question

我试图找到用户点击的当前单元格。例如，如果用户点击了第一个单元格，我想返回1.如果他们点击了我要返回的第十个单元格10.表格中总共有16个单元格。

<html>
        <head>
        <title>Lights Out!</title>
        <script type="text/javascript" src="jquery-1.4.js"></script>

        <script type= "text/javascript">

        //The d
        var gameBoard = new Array(getTdCount())

        for(var i =0; i < getTdCount(); i++)
        {
            gameBoard[i] = 0;
        }





        function getTdCount()
        {
            return $("td").length;
        }

        $(document).ready(function()
        {

            $("#board tr td").hover(function()
            {
                $(this).css('border-color', '00FF33');
            },
            function()
            {
                $(this).css('border-color', 'black')
            })

            var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')     
            $('td').append($offProtoType)

            $("#board tr td").click(function()
            {
                $("img", this).attr('src', 'on.png')

            })

        });


        </script>

        <style type="text/css">
        td
        {
            border-style:solid;
            border-color:black;
            background-color:black;
            float:left;
        }

        </style>


        </head>
        <body>

        <img style = "display:none" id="offprototype"  src ="off.png">
        <img style = "display:none" id="onprototype"  src ="on.png">

        <table id="board" border="3" bgcolor="black" align="center">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </table>
        <input type="button" value="Shuffle" onclick="change()"/>
        </body>
    </html>

Answer 1

使用index：

var $tds = $('#board tr td');
$tds.click(function(){
    // Gets the 0 based index, and add 1:
    var num = $tds.index(this) + 1; 
    $("img", this).attr('src', 'on.png') 
});

我们首先缓存#board tr td搜索的结果，因此我们无需在每次点击时查找。

接下来，我们使用index函数从td元素的完整结果中查找当前td的索引。

最后，我们添加1，因为index会返回基于0的计数。

更新：jQuery 1.4

如果我们可以使用jQuery 1.4的新index()功能，那么这不是一个实例。不带参数的index()从其兄弟的上下文中获取元素的索引。在这种情况下，我们需要在表中所有td元素的上下文中，而不仅仅是它的兄弟元素。

如果没有参数传递给.index（）方法，则返回值是一个整数，表示jQuery对象中第一个元素相对于其兄弟元素的位置。

Answer 2

像这样：

var cells = $('#board td')
cells.click(function() { alert(cells.index(this) + 1); });

Answer 3

可以使用cellIndex属性。

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82915075

请注意：Safari 2和Konqueror中存在一个错误，其中cellIndex始终为0.在这种情况下，可以使用功能测试和回退。

单击时查找当前td单元格的位置

3 个答案: