D3.js style and class override not work as my expectation-CodePudding

May I know why my class "bold-header" styles didn't override to the first row<tr> of the table?

HTML:

<style>
    .bold-header{
        background-color:navy;
        color:white;
    }
</style>

<table border="1">
    <tr>
        <td>ID</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>001</td>
        <td>John</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Alex</td>
    </tr>
    <tr>         
        <td>003</td>
        <td>Maxwell</td>
    </tr>
</table>

Script:

d3.select("table").selectAll("td").style("background-color", "lightblue").style("width", "100px");

d3.select("table").select("tr").classed("bold-header", true);

I expect this result: my expectation

but it gave me this: actual result

CodePudding user response：

The background color is not working because we need to set background color on <td> element of first row. In your code, you are not selected corresponding td's.

The following changes are needed in second line of JS code:

d3.select("table").select("tr").selectAll("td").classed("bold-header", true);

UPDATE

I have understood the question and have updated the code, the another reason that your code is not working because you lightblue color is overriding the navy color. So, I would suggest you to select the header td tags and body td tags wisely. Please see the working code below

d3.select("table").selectAll("tr:not(:first-child)").style("background-color", "lightblue").style("width", "100px");

d3.select("table").select("tr").classed("bold-header", true);

 .bold-header{
        background-color:navy;
        color:white;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<table border="1">
    <tr>
        <td>ID</td>
        <td>Name</td>
    </tr>
    <tr>
        <td>001</td>
        <td>John</td>
    </tr>
    <tr>
        <td>002</td>
        <td>Alex</td>
    </tr>
    <tr>         
        <td>003</td>
        <td>Maxwell</td>
    </tr>
</table>