javascript - 如何将垂直 <tr> 更改为水平 <tr>-6ren

javascript - 如何将垂直更改为水平

转载作者：行者123 更新时间：2023-11-28 13:07:25

生成此代码是为了做两件事。第一个是单击复选框时突出显示表记录。第二个是即使页面刷新也能记住结果。

   <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body>
    <style>
    .highlight-red {
        background-color: red;
    }    
    .highlight-green {
        background-color: green;
    }
    .highlight-yellow {
        background-color: yellow;
    }    
    </style>
    <div class="col-lg-10">
        <table id="Table" border="1" >
            <tr class="highlight">
            <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
            <td>Click me</td>
            </tr>
            <tr>
            <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
            <td>Click me</td>
            </tr>
            <tr>
            <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
            <td>Click me</td>
            </tr>
        </table>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>

        function changeSoma(data, color){
                if(data.checked && color == 'red'){
                    $(data).parent().parent().addClass("highlight-red");
                }
                else{
                    $(data).parent().parent().removeClass("highlight-red");
                }
                if(data.checked && color == 'green'){
                    $(data).parent().parent().addClass("highlight-green");
                }
                else{
                    $(data).parent().parent().removeClass("highlight-green");
                }
                if(data.checked && color == 'yellow'){
                    $(data).parent().parent().addClass("highlight-yellow");
                }
                else{
                    $(data).parent().parent().removeClass("highlight-yellow");
                }
        }
    </script>
    <script>

        var cond = JSON.parse(localStorage.getItem("check"));
        for(var i in cond) {
            if(cond[i]) {
             $("#"+i).attr("checked",true);
             $("#"+i).parent().parent().addClass("highlight-"+cond[i]);
            }
        }
        function changeSoma(data, color){
                var state;
                if(localStorage.getItem("check") == null) {
                    state = {cb1:0,cb2:0,cb3:0};
                } else{
                    state = JSON.parse(localStorage.getItem("check"));
                }

                if(data.checked) {
                    $(data).parent().parent().addClass("highlight-"+color);
                    state[data.id]= color;
                } else {
                    $(data).parent().parent().removeClass("highlight-"+color);
                    state[data.id]= 0;
                }
                localStorage.setItem("check",JSON.stringify(state));
        }
    </script>
    </body>
    </html>

但我需要三个复选框处于水平位置。当我删除 tr 标签时，只有一种颜色突出显示所有三个复选框，其他 2 种颜色不起作用。如下所示。我怎样才能改变这个？有人能解释一下我的错误在哪里吗？

最佳答案

只需将其添加到您的 tr 标记中即可。无需删除。

style="display: inline-block;"

应该是这样的

<tr style="display: inline-block;">
    <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
    <td>Click me</td>
</tr>

关于javascript - 如何将垂直 <tr> 更改为水平 <tr>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45373883/