Jquery + HTML Table

Question

我有一个 html table：顶行包含 <td> 个按钮：

<td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 1)"></td>

单击时，该函数调用 dropToken() 来更改 <td> 的颜色，并通过更改将 "token" 拖放到最后一行（连接四个）的匹配列它的 background-color 到 playerTurn 这是一个定义玩家回合和令牌颜色的变量。但是，dropToken() 中的 jquery 部分不起作用，并且会阻止函数的其余部分继续运行。

function dropToken(obj, column)
        {
            $('table tr:last-child td:nth-child(column)').css("background-color", playerTurn);
            if (playerTurn == "Red")
            {
                playerTurn = "Blue"
                obj.style.backgroundColor = "Blue";   
            }
            else
            {
                playerTurn = "Red"
                obj.style.backgroundColor = "Red"; 
            }
        }

请帮忙！谢谢

        <script>
        var playerTurn = "Red"
        var column = 0;

        function tokenColor (obj) 
        {
            if (playerTurn == "Red")
            {
                obj.style.background = "Red";
                obj.style.border = "2px solid black";
            }
            else
            {
                obj.style.backgroundColor = "Blue";
                obj.style.border = "2px solid black";
            }
        }

        function noToken(obj)
        {
            obj.style.backgroundColor = "white";
            obj.style.border = "2px solid white";
        }

        function dropToken(obj, column)
        {
            $('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn);
            if (playerTurn == "Red")
            {
                playerTurn = "Blue"
                obj.style.backgroundColor = "Blue";   
            }
            else
            {
                playerTurn = "Red"
                obj.style.backgroundColor = "Red"; 
            }
        }

        function resetBoard()
        {
            location.reload()
        }
    </script>

    <h1>Connect Four</h1>
    <table>
        <tr class="topRow">
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 1)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 2)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 3)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 4)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 5)"</td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 6)"></td>
            <td onmouseover="tokenColor(this)" onmouseout="noToken(this)" onclick="dropToken(this, 7)"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <button type="button" onclick="resetBoard()">Empty Tokens</button>
</body>

Answer 1

请将此 $('table tr:last-child td:nth-child(column)') 更改为此 $('table tr:last-child td:nth-child(' + column + ')')

Answer 2

我会在您进行重构时进行一些重构，并在整个过程中保持一致jQuery

function dropToken(obj, column)
{
   $('table tr:last-child td:nth-child(' + column + ')').css("background-color", playerTurn);

   //Toggle player turn value
   playerTurn = playerTurn == "Red" ? "Blue" : "Red";
   $(obj).css("background-color", playerTurn);
}

使用 CSS 和 Jquery 进一步简化：

$(".topRow td").click(function(){
    var col = $(this).parent().children().index($(this));
    
    
    var activePlayer = $(this).closest("table").data("activeplayer");
    $('table tr:last-child td:nth-child(' + (col + 1) + ')').css("background-color", activePlayer);

    
    //Toggle Active Player 
    activePlayer = activePlayer == "Red" ? "Blue" : "Red";
    $(this).closest("table").data("activeplayer", activePlayer);
    $(this).css("background-color", activePlayer);
});

table[data-activePlayer="Blue"] .topRow td:hover
{
background-color:blue;    
}


.topRow td:hover
{
  border: 2px solid black;  
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table data-activeplayer="Red">
        <tr class="topRow">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

Jquery + HTML Table

Jquery + HTML Table

javascript

jquery

html-table