Question

我正在尝试用我的JS代码中的一些值填充HTML表。前几行有效，但我的功能没有。

有谁知道为什么？我在下面提供了我的代码。

function set(id,num) {
    document.getElementById(id).innerHTML = num;
}
var num1 = set("1.4", 55); //ok
var num2 = set("1.6", 56); //ok
var num3 = set("1.12", 57); //ok

function addition() { //notok
    //var n1 = document.getElementById("1.4").innerHTML;
    //var n2 = document.getElementById("1.6").innerHTML;
    //var n3 = document.getElementById("1.12").innerHTML;
    //document.getElementById("1.14").innerHTML = parseInt(n1) + parseInt(n2) + parseInt(n3);
    document.getElementById("1.14").innerHTML = 55 + 56 + 57;
}

body {
    background-color: white;
}

table {
    font-size: 15px;
    border-collapse: collapse;
    border: solid black 1px;
    border-radius: 6px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
}

td, th {
    border: solid black 1px;
    padding: 10px;
}

.theader {
    background-color: rgb(254, 102, 0);
}

th:first-child{
    border-top: none;
}

td {
    text-align:center;
}



td:first-child, th:first-child {
     font-weight: bold;
}

h1 {
    margin-top: 150px;
    text-align: center;
    color: black;
}

  tr { background-color: white}
  .change { background-color: black; color:white }
  .normal { background-color: white }
  .notchange{ background-color: white }

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet1.css" rel="stylesheet" />    
    
</head>
<body>
    <h1>Test</h1>        
    <table>
<tr class="normal" onmouseover="this.className='change'" onmouseout="this.className='notchange'">
  <td>Row1</td>
  <td id="1.1">11</td>
  <td id="1.2">11</td>
  <td id="1.3">12</td>
  <td id="1.4"></td>
  <td id="1.5">14</td>
  <td id="1.6"></td>
  <td id="1.7">16</td>
  <td id="1.8">17</td>
  <td id="1.9">18</td>
  <td id="1.10">19</td>
  <td id="1.11">20</td>
  <td id="1.12"></td>
  <td id="1.13">22</td>
  <td id="1.14"></td>
</tr>
...........
</table>
    <script type="text/javascript" src="MyJavaScript1.js"></script>

</body>
</html>

我正在写一个表格，JS，（“1.4”，“1.6”，“1.12”）单元格正确填充，但我无法填充单元格“1.14”。

Answer 1

你实际上从未invoke the function，所以它不会运行。

将您的代码更改为：

function set(id,num) {
    document.getElementById(id).innerHTML = num;
}
var num1 = set("1.4", 55); //ok
var num2 = set("1.6", 56); //ok
var num3 = set("1.12", 57); //ok

function addition() { //notok
    document.getElementById("1.14").innerHTML = 55 + 56 + 57;
}

// added this line:
addition();

我添加了最后一行（并删除了注释行），它将调用该方法（因此在里面运行代码）并将函数移动到文件的顶部。虽然不需要移动函数感谢function hoisting我觉得在调用函数之前声明函数是个好习惯。

附加说明

您将set函数的结果分配给变量，其中包含以下行：

var num1 = set("1.4", 55); //ok

你没有有来做这件事。你可以调用set（“1.4”，55）。

========以下的老答案==========

您使用getElementById和.valueOf错误。 getElementById   指的是HTML元素。例如：

getElementById("cell1")会选择看起来像这样的元素：

<td id="cell1"></td>

.valueOf 返回String对象的原始值，例如：
var str = "Hello World!";
var res = str.valueOf(); 
console.log(res); // prints: Hello World!
假设你的html看起来像这样：
<table>
    <tr>
        <td id="cell1"></td>
        <td id="cell2"></td>
        <td id="cell3"></td>
    </tr>
</table>
填充单元格的Javascript代码看起来像此::
document.getElementById("cell1").innerHTML = "1.4";
document.getElementById("cell2").innerHTML = "1.6";
document.getElementById("cell3").innerHTML = "1.12";

Answer 2

function addition() { //OK
    var n1 = document.getElementById("1.4").innerHTML;
    var n2 = document.getElementById("1.6").innerHTML;
    var n3 = document.getElementById("1.12").innerHTML;
    document.getElementById("1.14").innerHTML = parseInt(n1) + parseInt(n2) + parseInt(n3);
}
addition();

它有效。我的错。我删除了函数调用，忘了再写一次。

Javascript单元格填充

2 个答案: