【问题标题】:Need loop help for building table with Javascript需要循环帮助以使用 Javascript 构建表
【发布时间】:2011-05-26 03:10:51
【问题描述】:

这是我的功能:

function CreateResultsTable(bps, incs) {
    var table = document.createElement('table');
    var str = '<table border=1>';
    str += '<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>';

    var i = 0;

    // up
    for (i = 0; i < incs; i++) {
        var num = (incs - i) * bps;
        var newStr = num.toString();
        str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
    }
    i = 0;

    //down
    for (i = incs; i > 0; i--) {
        var num = (incs - i) * bps;
        var newStr = '-' + num.toString();
        str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
    }
    return str;
}

我想要的是说我通过{bps = 25, incs = 4}。它应该始终创建两倍的行数(在标题行下方)。因此,对于 incs = 4 和 bps = 25,它应该创建第一个 td = 100, 75, 50, 25, -25, -50, -75, -100 的行——按此顺序。

它现在正在做的是像100, 75, 50, 25, -0, -25, -50 这样创建它们——就是这样。

我做错了什么?

【问题讨论】:

  • 别忘了关闭你的table 元素。
  • 不要尝试用字符串构建表格的内部。使用 createElement 和朋友。 IE 真的不喜欢改变一些表格的 innerHTML。
  • @David - 你说的是真的,但他没有这样做,他正在创建一个完整的表,所以虽然我也不喜欢它......这在 IE 中不是问题。跨度>
  • 啊。我查看了第二行,并没有注意到结果从未使用过。

标签: javascript html loops html-table


【解决方案1】:

你的最后一个循环需要是&gt;= 而不是只是&gt; 并开始一个更低的,像这样:

for (i = incs-1; i >= 0; i--) {

You can test it out here,唯一的其他变化是在末尾添加 &lt;/table&gt; 并在边框属性上加上引号。


有一个更简单的方法来解决这个问题,使用单个循环并根据需要排除 0,如下所示:

function CreateResultsTable(bps, incs) {
    var str = '<table border="1">';
    str += '<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>';

    for (var i = incs*bps, low = -i; i >= low; i-=bps) {
        if (i == 0) continue; //exclude the 0 row
        str += '<tr><th>' + i + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
    }
    str += '</table>';
    return str;
}

You can test the result here,这只是一种更简单/更便宜的单循环方式或做同样的事情。

【讨论】:

  • 所以他会得到100, 75, 50, 25, -0, -25, -50 100 而不是100, 75, 50, 25, -25, -50 100
  • @gregor - 哎呀,你是对的,我误读了他的 expected 结果(在阅读时将其与他的实际混合),答案/演示已更新。
【解决方案2】:

您必须从incs -1 开始计数到零。所以函数应该看起来像

function CreateResultsTable(bps, incs) {
        var table = document.createElement('table');
        var str = '<table border=1>';
        str += '<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>';

        var i = 0;

        // up
        for (i = 0; i < incs; i++) {
            var num = (incs - i) * bps;
            var newStr = num.toString();
            str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
        }
        i = 0;

        //down
        for (i = incs - 1; i >= 0; i--) {
            var num = (incs - i) * bps;
            var newStr = '-' + num.toString();
            str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
        }
        return str;
    }

【讨论】:

  • 虽然这确实解决了问题中的问题,但有一个非常更简单的方法可以解决它,请参阅下面的答案:)
猜你喜欢
  • 2019-10-28
  • 2013-05-24
  • 1970-01-01
  • 2021-08-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-22
  • 1970-01-01
相关资源
最近更新 更多