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

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

本文关键字：最佳 方式吗 返回值 函数 显示 javascript      更新时间：2023-09-26

我被指派创建一个基本的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>

使用document.write违背了JavaScript动态性的目的，您应该使用DOM操作，特别是，表有自己的方法来实现您的要求。

此外，我可以建议使用object{}而不是两个单独的arrays[]来为各州分配里程吗？请在此处查看其工作情况。

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>

我已经将您的表分为<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获取表，如果您有多个表，则应通过getElementById获取它们，并为每个表分配适当的id
  • 然后，我们调用listStates()函数，该函数将接受表参数，并传递我们的表
  • 在所述函数中，我们通过访问table.tBodies属性的第一个元素来获得<table>的<tbody>
  • 然后，我们对states对象内部的属性进行迭代，并使用DOM内置的表方法（如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>

相关文章：