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

this Is my code

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 { display: flex; justify-content: center }

CodePudding user response：

You have multiple ways to do this (you will need a little of Javascript).

I propose the next:

html file:


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

css file:

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

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

javascript file:

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");
    }
};