javascript - 如何在 HTML 正文中调用 JavaScript 函数

Question

我有一个填充表格的 JavaScript 函数：

<script>

var col1 = ["Full time student checking (Age 22 and under) ", "Customers over age 65", "Below  $500.00"];
var col2 = ["None", "None", "$8.00"];

function createtable() {
    <!--To fill the table with javascript-->
    for (var j = 0; j < col1.length; j++) {
        if (j % 2 == 0) {
            document.write("<tr><td>" + col1[j] + " </td>");
            document.write("<td>" + col2[j] + "</td></tr>");
        } else {
            document.write("<tr  bgcolor='#aeb2bf'><td>" + col1[j] + " </td>");
            document.write("<td>" + col2[j] + "</td></tr1>");
        }
    }
}
</script>

我想在 HTML 正文中执行它。我尝试了以下方法，但它没有创建表。

<table>
    <tr>
        <th>Balance</th>
        <th>Fee</th>        
    </tr>
      createtable();
</table>

如何在 HTML 正文中执行此功能？

score 81 · Accepted Answer

尝试将createtable();语句包装在<script>标签中：

<table>
        <tr>
            <th>Balance</th>
            <th>Fee</th>

        </tr>
        <script>createtable();</script>
</table>

如果我是你，我会避免使用 document.write() 并使用 DOM。

score 23 · Accepted Answer

首先将文件包含在 html 的 head 标签中，然后在 body 标签下的 script 标签中调用该函数，例如

要调用的js文件函数

function tryMe(arg) {
    document.write(arg);
}

文件

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src='object.js'> </script>
    <title>abc</title><meta charset="utf-8"/>
</head>
<body>
    <script>
    tryMe('This is me vishal bhasin signing in');
    </script>
</body>
</html>

结束

score 3 · Accepted Answer

只是为了澄清事情，您不能/不能“在 HTML 正文中执行它”。

您可以使用 javascript 修改 HTML 的内容。

您决定要在什么时候执行 javascript。

例如，这是一个 html 文件的内容，包括 javascript，它可以满足您的需求。

<html>
  <head>
    <script>
    // The next line document.addEventListener....
    // tells the browser to execute the javascript in the function after
    // the DOMContentLoaded event is complete, i.e. the browser has
    // finished loading the full webpage
    document.addEventListener("DOMContentLoaded", function(event) { 
      var col1 = ["Full time student checking (Age 22 and under) ", "Customers over age 65", "Below  $500.00" ];
      var col2 = ["None", "None", "$8.00"];
      var TheInnerHTML ="";
      for (var j = 0; j < col1.length; j++) {
        TheInnerHTML += "<tr><td>"+col1[j]+"</td><td>"+col2[j]+"</td></tr>";
    }
    document.getElementById("TheBody").innerHTML = TheInnerHTML;});
    </script>
  </head>
  <body>
    <table>
    <thead>
      <tr>
        <th>Balance</th>
        <th>Fee</th>        
      </tr>
    </thead>
    <tbody id="TheBody">
    </tbody>
  </table>
</body>

享受！

score 0 · Accepted Answer

尝试在脚本标签中使用 DOM 的 createChild() 方法或 table 对象的 insertRow() 和 insertCell() 方法。

javascript - 如何在 HTML 正文中调用 JavaScript 函数

4 回答 4

Related

Reference