这是显示 javascript 函数返回值的最佳方式吗？

Question

我被分配创建一个基本的 HTML 页面来显示美国最大的州，使用每个州作为存储的 javascript 变量。出于某种原因，我觉得这比我做的更容易。有什么建议吗？

<script>
var states = ["Alaska", "Texas", "California", "Montana", "New Mexico", "Arizona", "Nevada"];
var miles = [663267, 268581, 163696, 147042, 121589, 113998, 110561];
var index= "";
text="";
function listStates() {
    for (index=0; index < states.length; index++) {
            text += "<tr><td>" + states[index] ;    
            text += "</td><td>" + miles[index] ;
            text += "</td></tr>";
    }
    return text;
}
</script>

<section id="table">
<table width="307" height="45">
<tr><th width="40">Name</th><th width="65">Size</th></tr>
<script>
<!--
    var result = listStates();
    document.write(result);
//-->
</script>
</table>

Answer 1

使用document.write违背了JavaScript动态的目的，你应该使用DOM操作，具体来说，tables有自己的方法来完成你的要求为.

此外，我可以建议使用 object{} 而不是两个单独的 arrays[] 来为各州分配里程吗？看到它工作 here.

HTML

<section>
    <table width="307" height="45">
        <thead>
            <tr>
                <th width="40">Name</th>
                <th width="65">Size</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</section>

我已将您的 table 分为 <thead> 和 <tbody> 以更符合 HTML5 标准。

JavaScript

states = {
    "Alaska": 663267,
        "Texas": 268581,
        "California": 163696,
        "Montana": 147042,
        "New Mexico": 121589,
        "Arizona": 113998,
        "Nevada": 110561
}

window.addEventListener("load",function(){
    table = document.querySelector("table");
    listStates(table);
});


function listStates(table) {
    var body = table.tBodies[0];
    for (var state in states) {
        var miles = states[state];
        var row = body.insertRow();
        var stateCell = row.insertCell();
        stateCell.innerHTML = state;
        var mileCell = row.insertCell();
        mileCell.innerHTML = miles;
    }
}

步骤

首先，我们在一个对象内对齐状态和里程（存储键值对的最简单方法）。
然后，我们使用 querySelector 获取 table，如果您有多个 table，您应该通过 getElementById 获取它们并将正确的 ID 分配给每一个。
然后，我们调用 listStates() 函数，该函数将采用 table 参数，并传递我们的 table.
在上述函数中，我们通过访问 table.tBodies 属性.

<table>

<tbody>

然后，我们遍历 states 对象中的属性，我们使用 DOM 内置的 table 方法，如 insertRow() 和 insertCell() 来实现我们的目的。

希望对您有所帮助！

更新

这是一个 代码片段 展示了它在工作中的作用（添加了 window.onload 事件）

states = {
  "Alaska": 663267,
  "Texas": 268581,
  "California": 163696,
  "Montana": 147042,
  "New Mexico": 121589,
  "Arizona": 113998,
  "Nevada": 110561
}

window.addEventListener("load", function() {
  table = document.querySelector("table");
  listStates(table);
});


function listStates(table) {
  var body = table.tBodies[0];
  for (var state in states) {
    var miles = states[state];
    var row = body.insertRow();
    var stateCell = row.insertCell();
    stateCell.innerHTML = state;
    var mileCell = row.insertCell();
    mileCell.innerHTML = miles;
  }
}

table {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
  border: 1px solid lightgrey;
  font-family: Arial;
  font-size: 14px;
}
thead {
  text-decoration: underline;
}

<section>
  <table width="307" height="45">
    <thead>
      <tr>
        <th width="40">Name</th>
        <th width="65">Size</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</section>

这是显示 javascript 函数返回值的最佳方式吗？

Is this the best way to display my returned value from javascript function?

javascript

arrays

for-loop

document.write

HTML

JavaScript

步骤

更新