Question

好的，我有一个HTML页面。在这个页面里面，我有一个包含行和列的表。对于每个TD元素。我有一个＆＃34; idnum＆＃34;属性。现在我也有一个ARRAY。在这个ARRAY中我有3个对象。更准确3个数字。好看，看看与表中数字相匹配的数字。现在我希望表中的每个对象的编号都在ARRAY中。将获得直的红色背景颜色。更准确的是另一个类的对象。谁知道如何解决这个问题？谢谢大家。

<!DOCTYPE html>
<html>
<head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.numeric.js"></script>
        <script type="text/javascript">

        </script>
    <title></title>
    <style type="text/css">
        td:hover{
            color: red;
        }
        .class1{

        }
        .class2{
            background-color: red;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>test</th>
        <td class="class1" idnum="111">TD1</td>
        <td class="class1" idnum="222">TD2</td>
        <td class="class1" idnum="333">TD3</td>
    </tr>
</table>
<h1 id="content"></h1>
<script type="text/javascript">
$(document).ready(function(){
     var array1 = ["111","222","333"];
     for(var i = 0; i<array1.length; i++){
        $("#content").append(i+"-->"+array1[i] + "</br>" );
        var count = array1[i];
         var td = $("*").find("td").attr("idnum");
            if(td == array1[i]){
                $(this).toggleClass("class2");
            }

     }
});


    $(document).ready(function(){
        $(".class1").on("click", function(){
            $(this).toggleClass("class2");
        var idnum = $(this).attr("idnum");
            alert("idnum is " + idnum);
        })
    })
</script>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<head>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.numeric.js"></script>
        <script type="text/javascript">

        </script>
    <title></title>
    <style type="text/css">
        td:hover{
            color: red;
        }
        .class1{

        }
        .class2{
            background-color: red;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <th>test</th>
        <td class="class1" idnum="111">TD1</td>
        <td class="class1" idnum="444">TD2</td>
        <td class="class1" idnum="333">TD3</td>
    </tr>
</table>
<h1 id="content"></h1>
<script type="text/javascript">
$(document).ready(function(){
     var array1 = ["111","444","333"];


        $("td").each(function(){
            var td = ($(this).attr("idnum"));
            for(var i = 0; i < array1.length; i++){
           if(td == array1[i])
            $(this).addClass("class2");
            }

        })
    })




    $(document).ready(function(){
        $(".class1").on("click", function(){
            $(this).toggleClass("class2");
        var idnum = $(this).attr("idnum");
            alert("idnum is " + idnum);
        })
    })
</script>
</body>
</html>

如何更改TD表的类。页面加载后？

1 个答案: