堆栈内存溢出
  简体   繁体   English

有没有更有效的方式来编写此代码？

[英]Is there a more efficient way to write this?

 原文  2015-10-19 03:28:56  3   2    javascript/ html/ arrays/ list

问题描述

just working on a school project that my instructor came up with, supposed to be written in pseudocode but I'm taking it a step further and writing it in javascript/html to make a functional website. 只是在我的老师想出的一个学校项目上工作，该项目应该是用伪代码编写的，但是我将其进一步发展并用javascript / html编写，以创建一个功能正常的网站。 Basically, there's a hypothetical school with 9 grades, 3 classrooms per grade, and 9 months per class. 基本上，有一所假设的学校有9个年级，每个年级3个教室，每个班9个月。 I'm supposed to write a pseudocode script for how to generate a bill for each of the classrooms - kindergarten is $80 per month, the remaining classes are $60 per month up to 8th grade. 我应该写一个伪代码脚本来说明如何为每个教室生成账单-幼儿园是每月80美元，其余的班级是8年级之前每月60美元。

Anyways, I'm curious if there's a better way to write this code and list the bill for each month - the way the instructor laid out the code, I'd have to write this 27 times (3 per classroom times 9 grades) with kindergarten being $80 per month and the rest of the classes being $60 per month. 无论如何，我很好奇是否有更好的方法来编写此代码并列出每个月的账单-讲师编写代码的方式，我不得不用27次编写（每个教室3次乘以9年级），幼儿园每月80美元，其余课程每月60美元。 Here's what I have so far: 这是我到目前为止的内容： 

<body>
    <script>
        var x = 0;
        var y = 1;
        var i;
        var theMonths = ["January", "February", "March", "April", "May",
            "June", "July", "August", "September"];

        function javascript() {
            for (i = 0; i < 10; i++) {
                document.getElementById("td1").innerHTML += theMonths[0];
                document.getElementById("td2").innerHTML += theMonths[1];
                document.getElementById("td3").innerHTML += theMonths[3];
                document.getElementById("td4").innerHTML += theMonths[4];
                document.getElementById("td5").innerHTML += theMonths[5];
                document.getElementById("td6").innerHTML += theMonths[6];
                document.getElementById("td7").innerHTML += theMonths[7];
                document.getElementById("td8").innerHTML += theMonths[8];
                document.getElementById("td1a").innerHTML += "$60";
                document.getElementById("td2a").innerHTML += "$60";
                document.getElementById("td3a").innerHTML += "$60";
                document.getElementById("td4a").innerHTML += "$60";
                document.getElementById("td5a").innerHTML += "$60";
                document.getElementById("td6a").innerHTML += "$60";
                document.getElementById("td7a").innerHTML += "$60";
                document.getElementById("td8a").innerHTML += "$60";
                return false;
            }
        }
    </script>
    <div id="demoDiv">
        <p id="demo">Your coupons:</p>
        <table>
            <tr>
                <th scope="col">Month:</th>
                <th scope="col">Price:</th>
            </tr>
            <tr>
                <td id="td1"></td>
                <td id="td1a"></td>
            </tr>
            <tr>
                <td id="td2"></td>
                <td id="td2a"></td>
            </tr>
            <tr>
                <td id="td3"></td>
                <td id="td3a"></td>
            </tr>
            <tr>
                <td id="td4"></td>
                <td id="td4a"></td>
            </tr>
            <tr>
                <td id="td5"></td>
                <td id="td5a"></td>
            </tr>
            <tr>
                <td id="td6"></td>
                <td id="td6a"></td>
            </tr>
            <tr>
                <td id="td7"></td>
                <td id="td7a"></td>
            </tr>
            <tr>
                <td id="td8"></td>
                <td id="td8a"></td>
            </tr>
        </table>
    </div>
    <input type="button" value="Go!" onclick="javascript();" />
</body>

Is there a way to simplify this so I don't have to copy/paste everything 27 times and make 27 individual tables with different ID's for the td items? 有没有一种方法可以简化此过程，所以我不必将所有内容复制/粘贴27次并为td项目制作27个具有不同ID的单独表？

If you can solve this for me - you're awesome :D 如果您能为我解决这个问题-您真棒：D

2 个解决方案

解决方案1
 4 已采纳  2015-10-19 03:42:20

You can use for as follow to populate the data in the table 您可以使用for如下填充在表中的数据

  1. The variables x and y are not used at all, removed them 完全不使用变量x和y ，将其删除
  2. Removed return false; 删除return false; from for which was causing the loop to run only once and then return control from function 从for这是造成循环运行一次，然后从函数返回控制
  3. Used the loop variable i to get the dynamic sequential ID of the elements and the corresponding element from array 使用循环变量i从数组中获取元素和相应元素的动态顺序ID
  4. Removed += from innerHTML to prevent from adding repetitive data on button click 已从innerHTML删除+=以防止在单击按钮时添加重复数据
  5. Used the hard-coded value 8 to loop over all the elements, should be dynamic and equal to the length of array. 使用硬编码值8遍历所有元素，应该是动态的并且等于数组的长度。

Demo 演示 

var theMonths = ["January", "February", "March", "April", "May",
    "June", "July", "August", "September"];

function javascript() {
    for (var i = 0; i < 8; i++) {
        document.getElementById("td" + (i + 1)).innerHTML = theMonths[i];

        document.getElementById("td" + (i + 1) + "a").innerHTML = "$60";
    }
}

解决方案2
 2  2015-10-19 04:01:45

I didn't really what you're supposed to do, so I'll just address what you are actually doing. 我并没有真正应该做的事情，所以我只解决您实际正在做的事情。 Absent some other input, I don't see the point of the button, so I've just moved the script below the DOM elements that you want to modify, and am generating the repetitious columns. 在没有其他输入的情况下，我看不到按钮的指向，因此我只是将脚本移至要修改的DOM元素下方，并生成了重复的列。 

<body>
    <div>
        <p> Your coupons: </p>
        <table>
          <tbody id=demoTable>
            <tr>
                <th scope="col"> Month: </th>
                <th scope="col"> Price: </th>
            </tr>
          </tbody>
        </table>
    </div>
    <script>
      (function() {
        function td(text) {
          var column = document.createElement('td')
          column.textContent = text
          return column
        }

        var table = document.getElementById('demoTable'),
            months = 
              [ "January", "February", "March", "April", "May",
                "June", "July", "August", "September" ]
        months.forEach(function(month) {
          var row = document.createElement('tr')
          row.appendChild(td(month))
          row.appendChild(td('$60'))
          table.appendChild(row)
        })
      })()
    </script>
</body>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 有没有更有效的方法来编写这个函数？ - Is there a more efficient way to write this function? 如果/其他则更有效地编写此方法 - More efficient way to write this if/else 有没有办法写这个更短或更有效？ - Is there way to write this shorter or more efficient? 编写jQuery函数的更有效方法 - More efficient way to write jQuery function 寻找一种更有效的方式编写此jquery菜单 - Looking for a more efficient way to write this jquery menu 寻找一种更有效的方式来编写这个 Javascript - Looking for a more efficient way to write this Javascript 编写此DOM操作的更有效/适当的方法？ - More efficient/appropriate way to write this DOM manipulation? 有没有更有效的方法来编写这个涉及 FontAwesome 图标的 function？ - Is there a more efficient way to write this function involving FontAwesome icons? 我可以以更有效的方式编写这些事件侦听器吗？ - Could I write these event listeners in a more efficient way? 而不是重复代码块，而是编写此javascript的更有效方法？ - Instead of repeating blocks of code, more efficient way to write this javascript?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM