单击单选按钮后，我想给 table-header (th) 上色

Question

这是我的代码

https://codepen.io/mchedlo981/pen/ZErGPLN

<table>
    <tr>
        <th>
            <label for="1"><input id="1" type="radio">გამარჯობა</label>
        </th>
    <br>
        <th>
            <label for="2"><input id="2" type="radio">გამარჯობა</label> 
        </th>
    
    </tr>
    
</table>
    


th {
border: 1px solid;
width: fit-content;

}

table { 显示：弹性；证明内容：居中 }

Answer 1

您有多种方法可以做到这一点（您需要一点 Javascript）。

我提议下一个：

html 文件:


<table>
    <tr>
        <th class="th">
            <label for="1"><input id="rad1"  name ="1" type="radio">red</label>
        </th>
    <br>
        <th class="th">
            <label for="2"><input id="rad2" name ="1"  type="radio">green</label>   
        </th>
    
    </tr>
    
</table>

css 文件:

th {
    border: 1px solid;
    width: fit-content;
    
}

table {
    display: flex;
    justify-content: center
}

javascript 文件:

var th_list = document.getElementsByClassName("th");
document.getElementById("rad1").onclick = function() {
    for(var i = 0; i < th_list.length; i++) {
        th_list[i].style.setProperty("background", "red");
    }
};

document.getElementById("rad2").onclick = function() {
    for(var i = 0; i < th_list.length; i++) {
        th_list[i].style.setProperty("background", "green");
    }
};

单击单选按钮后，我想给 table-header (th) 上色

I want to give color to the table-header (th) after I click on radio button

html

css

html-table

sass