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

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

javascript jquery

Javascript 单击时查找当前td单元的位置,javascript,jquery,Javascript,Jquery,我正在尝试查找用户单击的当前单元格。例如，如果用户单击第一个单元格，我想返回1。如果他们点击第十个单元格，我想返回10。表中总共有16个单元格 <html> <head> <title>Lights Out!</title> <script type="text/javascript" src="jquery-1.4.js"></script> <scr

我正在尝试查找用户单击的当前单元格。例如，如果用户单击第一个单元格，我想返回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>


熄灯！
//d
var gameBoard=新阵列（getTdCount（））
对于（var i=0；i

使用：
我们首先将搜索结果缓存在#board tr td
搜索中，这样我们就不必在每次单击时查找它
接下来，我们使用index
函数从td
元素的完整结果中查找当前td
的索引
最后，我们添加1，因为index
返回基于0
的计数
更新：jQuery 1.4
如果我们可以使用jQuery 1.4的新的index（）
特性，那么这不是一个实例index（）
不带参数，从元素同级的上下文中获取元素的索引。在本例中，我们需要在表中所有td
元素的上下文中使用它，而不仅仅是它的兄弟元素
如果没有向.index（）方法传递任何参数，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置
像这样：
var cells = $('#board td')
cells.click(function() { alert(cells.index(this) + 1); });

可以使用cellIndex属性

请注意：Safari 2和Konqueror中存在一个错误，其中cellIndex始终为0。在这种情况下，可以使用特性测试和回退@帕特里克这不是我们可以使用速记的情况。我更新了我的答案来解释为什么不。你是对的。我没有仔细阅读这个问题，出于某种原因，我认为这仅仅是基于每一行。谢谢你抓住它。
var cells = $('#board td')
cells.click(function() { alert(cells.index(this) + 1); });