Question

这是我的代码

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var year_table = document.createElement("TABLE");
    year_table.setAttribute("id", "head_skill_table");
    document.body.appendChild(year_table);

var year_tr = document.createElement("TR");
    year_tr.setAttribute("id", "year_tr");
    document.getElementById("head_skill_table").appendChild(year_tr);

    for(i = 2006; i <= 2016; i++) {
        var year_th = document.createElement("TH");
        var year_cell = document.createTextNode(i);
            year_th.appendChild(year_cell);
            document.getElementById("year_tr").appendChild(year_th);
            year_th.style.width = "25vw";
            year_th.style.border = "2px dotted #a1a1a1";
            year_th.style.borderRadius = "100%";
            year_th.style.padding = "1.5% 0.5%";

        for(j = 0; j < 4; j++) {
            var year_hr = document.createElement("TH");
                year_hr.innerHTML = '<hr style="border-top: 2px dotted #a1a1a1;">';
                document.getElementById("year_tr").appendChild(year_hr);
                year_hr.style.width = "25vw";
            }
    }
    var year_th = document.createElement("TH");
    var year_cell = document.createTextNode(2017);
        year_th.appendChild(year_cell);
        document.getElementById("year_tr").appendChild(year_th);
        year_th.style.width = "25vw";
        year_th.style.border = "2px dotted #a1a1a1";
        year_th.style.borderRadius = "100%";
        year_th.style.padding = "1.5% 0.5%";
}

</script>
</head>
<body >

<div id="one">
<!--Some Content-->
</div>
<div id="two">
<!--Some Content-->
</div>
<div id="three">
<!--Some Content-->
</div>

<div id="myDiv" style="some css style">
<!--Place my table created with javascript function here, so it will inherite the css style-->
</div>

<div id="four">
<!--Some Content-->
</div>
<div id="five">
<!--Some Content-->
</div>
<div id="six">
<!--Some Content-->
</div>

</body>
</html>

现在我想将我的代码添加到div中，其中id =＆＃34; myDiv＆＃34;这样myFunction（）创建的表将继承myDiv（）的所有CSS样式我尝试了innerHTML，但是没有让表继承myDiv的风格。

Answer 1

使用CSS进行样式设置。这就是它的设计目标。

div #head_skill_table {
     /* my style rules */
    }

并更改javascript函数以接受div的ID以将表放在其中，因此它保持灵活性。

function myFunction(tableID) {
// ...
}

然后，您可以将显示与结构分开。

Answer 2

document.getElementById('myDiv').appendChild(year_table);

如果我理解正确，您只需要在生成表格之后使用此行。也不要忘记在某个时候或在window.onload中调用你的函数

window.onload = myFunction;

Answer 3

您必须使用ID head_skill_table来制作影响代码的样式

#head_skill_table {
  background:red;
}

Answer 4

您只需将year_table删除到myDiv中，如下所示。我为myDiv添加了一些样式，使边框变蓝。

<script>
function myFunction() {
var year_table = document.createElement("TABLE");
    year_table.setAttribute("id", "head_skill_table");
  var myDiv = document.getElementById("myDiv");
  myDiv.appendChild(year_table);
//    document.body.appendChild(year_table);

var year_tr = document.createElement("TR");
    year_tr.setAttribute("id", "year_tr");
    document.getElementById("head_skill_table").appendChild(year_tr);

    for(i = 2006; i <= 2016; i++) {
        var year_th = document.createElement("TH");
        var year_cell = document.createTextNode(i);
            year_th.appendChild(year_cell);
            document.getElementById("year_tr").appendChild(year_th);
            year_th.style.width = "25vw";
            year_th.style.border = "2px dotted #a1a1a1";
            year_th.style.borderRadius = "100%";
            year_th.style.padding = "1.5% 0.5%";

        for(j = 0; j < 4; j++) {
            var year_hr = document.createElement("TH");
                year_hr.innerHTML = '<hr style="border-top: 2px dotted #a1a1a1;">';
                document.getElementById("year_tr").appendChild(year_hr);
                year_hr.style.width = "25vw";
            }
    }
    var year_th = document.createElement("TH");
    var year_cell = document.createTextNode(2017);
        year_th.appendChild(year_cell);
        document.getElementById("year_tr").appendChild(year_th);
        year_th.style.width = "25vw";
        year_th.style.border = "2px dotted #a1a1a1";
        year_th.style.borderRadius = "100%";
        year_th.style.padding = "1.5% 0.5%";
}

</script>

<style>
  #myDiv table th {
    border-color:blue !important;
    }
  </style>

<div id="one">
<!--Some Content-->
</div>
<div id="two">
<!--Some Content-->
</div>
<div id="three">
<!--Some Content-->
</div>

<div id="myDiv" style="some css style">
<!--Place my table created with javascript function here, so it will inherite the css style-->
</div>

<div id="four">
<!--Some Content-->
</div>
<div id="five">
<!--Some Content-->
</div>
<div id="six">
<!--Some Content-->
</div>

<script>
  myFunction();
  </script>

如何在div中插入java脚本函数的元素？

4 个答案: