使用 Javascript 在 table 单元格中设置字体？

Question

我正在使用以下代码动态创建 table。 table 是根据需要创建的（代码有效）。这些单元格最终通过 Javascript innerHTML 填充。我需要添加两个功能，我正在寻求有关如何执行此操作的建议：

(1) 单元格c2和c3中的字体应与浏览器使用的默认字体不同。对于 c3，我尝试使用 c3.style.font = "Sans-serif"; 执行此操作，但这对字体没有影响。

(2) 当用户点击一个单元格时，我希望 Javascript 被点击的单元格的（行，列）调用，最好不必添加 'onClick'每个细胞。

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

结合评论者（tnx，伙计们）的建议，我已经完成了以下工作。 MakeTable中设置的一些单元格属性可以合并到CSS中，我稍后会做。

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}

此 CSS 仅适用于 nCols<=3，这是应该修复的其他问题。

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

使用 Javascript 在 table 单元格中设置字体？

Set font in table cell using Javascript?

javascript

html-table

dynamic

font-face