Question

我正在使用以下代码动态创建表。该表是根据需要创建的（代码可以工作）。最终通过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在表格单元格中设置字体？

1 个答案: