Set font in table cell using Javascript?

Question

I am creating a table dynamically, using the following code. The table is created as desired (the code works). The cells are eventually populated via Javascript innerHTML. I need to add two capabilities, and I am asking for suggestions on how to do this:

(1) The font in cells c2 and c3 should be different from the default font used by the browser. For c3, I attempted to do this with c3.style.font = "Sans-serif";, but this has no effect on the font.

(2) When user clicks on a cell, I want Javascript to be called with the (row, column) of the cell that was clicked, preferably without having to add an 'onClick' to every cell.

HTML: <table id="St" cellpadding=5 cellspacing=0></table>

Javascript:

    function MakeTable(nCols, nRows)
    {
    var table = document.getElementById("St");
    for (iRow = 0; iRow < nRows; iRow++) {
        var row = table.insertRow(-1); // add a row at the end
        // Row will have 3 x nCols cells
        for (iCol = 0; iCol < nCols; iCol++) {

            var c1 = row.insertCell(-1);
            c1.style.width = 16; c1.style.borderStyle = "solid";
            c1.style.borderColor = "black";
            c1.style.borderWidth = "thin";

            var c2= row.insertCell(-1);
            c2.style.width = 70; c2.style.borderStyle = "solid";
            c2.style.borderColor = "black";
            c2.style.borderWidth = "thin";

            var c3= row.insertCell(-1);
            c3.style.width = 70; c3.style.font = "Sans-serif";
            c3.style.borderStyle = "solid";
            if (iCol + 1 < nCols) // only separators between columns are thick
                c3.style.borderWidth = "thin 3px thin thin";
            else
                c3.style.borderWidth = "thin";

            c3.style.borderColor = "black";
        }
    }
}
`

Answer 1

Incorporating the suggestions from the commenters (tnx, guys), I've got everything working with the following. Some of the cell attributes set in MakeTable can be incorporated into the CSS, which I will do later.

CSS:

td {color: blue; font-family:sans-serif}
td:nth-child(1) {color: black; font-weight:bold; font-family:serif}
td:nth-child(4) {color: black; font-weight:bold; font-family:serif}
td:nth-child(7) {color: black; font-weight:bold; font-family:serif}

This CSS only works for nCols<=3, which is something else that should be fixed.

HTML: <table id="St" cellpadding=5 cellspacing=0 onclick="StClicked(event);"></table> Javascript:

function MakeTable(nCols, nRows)
{
    var table = document.getElementById("St");
    for (iRow = 0; iRow < nRows; iRow++) {
        var row = table.insertRow(-1); // add a row at the end
        // Row will have 3 x nCols cells
        for (iCol = 0; iCol < nCols; iCol++) {
            var c1= row.insertCell(-1);
            c1.style.width = 34; c1.style.borderStyle = "solid";
            c1.style.borderColor = "black";
            c1.style.borderWidth = "thin";

            var c2= row.insertCell(-1);
            c2.style.width = 70; c2.style.borderStyle = "solid";
            c2.style.borderColor = "black";
            c2.style.borderWidth = "thin";

            var c3= row.insertCell(-1);
            c3.style.width = 70; c3.style.borderStyle = "solid";
            c3.style.borderColor = "black";
            if (iCol + 1 < nCols) // only separators between columns are thick
                c3.style.borderWidth = "thin 3px thin thin";
            else
                c3.style.borderWidth = "thin";
        }
    }
}

function StClicked(event)
{
   var table1 = event.target;
   alert("clicked cell at: " + table1.cellIndex + ", " + table1.parentNode.rowIndex);
}