javascript - 允许行中的列宽度不同

Question

我试图让表格列的每一行具有不同的宽度。我正在使用一个数组来获取要转换为宽度百分比的值并将其传递到列中。输出似乎复制了上面的行，即使它具有不同的宽度。

http://jsfiddle.net/0182rutf/2/

HTML

<table border='1' id="table">

JS

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){totalCol += parseInt(this);});
    $('#table').append('<tr id="' + k + '"></tr>')    
    for (var i = 0; i < Array[k][i]; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
       $('#' + k).append('<td width="' + width + '%">column</td>');
    }

}

知道如何解决这个问题吗？

Answer 1

作为我上面评论的后续。

我建议在这里使用 Flexbox。但是，由于您知道要绘制的每一列的宽度，因此您也可以不使用它，但仍然保留 IE9 支持。

我在这里所做的只是让一个 div#grid 充当你的“表”的包。然后使用 JS，我生成一个 div.row ，就像您生成 tr 元素一样，在这些元素中，我生成 div.cell 元素，就像您对 td 元素所做的那样，并直接在这些“单元格”上设置宽度。

我更改了您的代码片段以使其正常工作: http://jsfiddle.net/0182rutf/5/

CSS:

#grid {
    border: 1px solid black;
}

#grid .row {
    position: relative;
}

#grid .cell {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid green;
}

JS:

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){totalCol += parseInt(this);});
    $('#grid').append('<div class="row" id="' + k + '"></div>')    
    for (var i = 0; i < Array[k][i]; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
        $('#' + k).append('<div class="cell" style="width: ' + width + '%">column</div>');
       console.log(weight);
    }

}

HTML:

<div id="grid"></div>

请注意，根据您的计算，50 的重量太大了:)