JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Pedigree table.
<hr>
<table class='pedigree-table' id='pedigree-s'></table>
<hr>
<table class='pedigree-table' id='pedigree-d'></table>

CSS

.pedigree-table {
    width: 100%;
}
.pedigree-table td {
    width: 25%;
    text-align: center;
    padding: 5px;
    border: 1px solid silver;
}
.pedigree-table .pedigree-inherit {
    padding: 5px 25px 5px 5px;
    background-image: url("https://ichef.bbci.co.uk/news/976/cpsprodpb/0170/production/_120086300_gettyimages-1233574374-1.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: 30px 100%;
}
.pedigree-table .pedigree-m .horse-container {
    background-color: lightblue;
}
.pedigree-table .pedigree-f .horse-container {
    background-color: lightpink;
}

JavaScript

let pedigreeTable = [
    [
        [8, "x", 1, "x"],
        [4, "m", 1, "s"],
        [2, "m", 1, "ss"],
        [1, "m", 0, "sss"]
    ],[
        [1, "f", 0, "ssd"]
    ],[
        [2, "f", 1, "sd"],
        [1, "m", 0, "sds"]
    ],[
        [1, "f", 0, "sdd"]
    ],[
        [4, "f", 1, "d"],
        [2, "m", 1, "ds"],
        [1, "f", 0, "dss"]
    ],[
        [1, "f", 0, "dsd"]
    ],[
        [2, "m", 1, "dd"],
        [1, "f", 0, "dds"]
    ],[
        [1, "f", 0, "ddd"]
    ]
];


function createPedigreeTable(parent){
    let html = "";
    for(let tr of pedigreeTable){
        html += "<tr>";
        for(let td of tr){
            let rowspan = td[0],
                sexClass = td[1],
                inheritClass = td[2],
                ancName = td[3];
            // These differ between 2 tables
            if(sexClass == "x"){
                if(parent == "s"){
                    sexClass = "m";
                }else{
                    sexClass = "f";
                }
            }
            if(ancName == "x"){
                ancName = parent;
            }else{
                // Append after s/d letter
                ancName = parent +""+ ancName;
            }
            html += "<td class='pedigree-" + sexClass;
            if(inheritClass == 1){
                html += " pedigree-inherit";
            }
            html += "'";
            if(rowspan > 1){
                html += " rowspan='" + rowspan + "'";
            }
            html += " id='pedigree-" + ancName + "'>";
            html += ancName;
            html += "</td>";
        }
        html += "</tr>";
    }
    document.getElementById("pedigree-" + parent).innerHTML = html;
}

createPedigreeTable("s");
createPedigreeTable("d");