Question

我在这里遇到一些问题让我的html表更改单个td`

＆＃13;

$(document).ready(function(){
    $("#table1 > td").click(function(){
        $(this).toggleClass("active");
    });
});

＆＃13;

table td.active {
    background: #006633;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table width="100%" border="0" id="table1">
                    <tr>
                    <td colspan="6" height="20px" bgcolor="#CCCCCC"><strong>CULTURE</strong></td>
                    </tr>
               
                    <tr>
                    <td width="5%"><p align="center">1</p></td>
                    <td width="40%">Is the CDP obvious - You Said / We Did Boards; Feedback Stations; Posters?</td>
                    <td width="5%" height="20px"><p align="center">1</p></font></td>
                    <td width="5%" height="20px"><p align="center">2</p></font></td>
                    <td width="5%" height="20px"><p align="center">3</p></font></td>
                    <td width="5%" height="20px"><p align="center">4</p></font></td>
                    </tr>
    </table>

＆＃13;

单击

when the td`。出于某种原因，当它被点击时它不会做任何事情。任何人都有任何想法，为什么会这样？

Answer 1

$("#table1 > td")到$("#table1 td")，但这会增加您选择的匹配项。所以，我建议添加一个唯一属性（我鼓励data-*）。

$(document).ready(function(){
    /*
    $("#table1 td").click(function(){
        $(this).toggleClass("active");
    });
    */
    // Better
    $("#table1 td[data-toggle]").click(function(){
        $(this).toggleClass("active");
    });
});

table td.active {
    background: #006633;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table width="100%" border="0" id="table1">
                    <tr>
                    <td colspan="6" height="20px" bgcolor="#CCCCCC"><strong>CULTURE</strong></td>
                    </tr>
               
                    <tr>
                    <td width="5%"><p align="center">1</p></td>
                    <td data-toggle width="40%">Is the CDP obvious - You Said / We Did Boards; Feedback Stations; Posters?</td>
                    <td data-toggle width="5%" height="20px"><p align="center">1</p></font></td>
                    <td data-toggle width="5%" height="20px"><p align="center">2</p></font></td>
                    <td data-toggle width="5%" height="20px"><p align="center">3</p></font></td>
                    <td data-toggle width="5%" height="20px"><p align="center">4</p></font></td>
                    </tr>
    </table>

Answer 2

$（＆＃34;＃table1＆gt; td＆＃34;）表示td是表中的第一个子元素。这不是真的，因为在你的情况下这是tr。只需将其更改为$（＆＃34;＃table1 td＆＃34;）即可完成（删除＆＃39;＆gt;＆＃39;）。

Answer 3

将$('#table1 > td')更改为$('#table1 td')，因为td不是table1的第一个孩子。

 $(document).ready(function(){
        $("#table1 td").click(function(){
            $(this).toggleClass("active");
        });
    });

在这里查看jsFiddle中的演示：https://jsfiddle.net/jagrati16/7ychbmht/

当点击td改变bgcolor？

3 个答案: