Question

我正在使用一组值动态构建一个html表。我想创建这个表，从第一列开始，向右移动。例如，我有数组：

['a', 'b', 'c', 'd', 'e', 'f']

我的表应如下所示：

a   c   e
b   d   f

如果我已经定义了我想要使用的列数，我会循环Math.ceil(array.length / number_of_columns)次以获得每一行。在该循环中，我循环number_of_columns次以获取每列。为了找出数组中的值，我需要使用这个公式：array_index = (row_column_number * number_of_rows) + row_number。这是一个正确的公式吗？另外，这是最好的方法吗？

Answer 1

你是完全正确的。这是使用核心java脚本执行此操作的唯一（最佳）方法。在下面找到您需要的测试java脚本代码。

<html>
<head>
<style> .mytable tr td{ margin:10px;border:1px dotted green;width:100px;}
</style>
<script type="text/javascript">
function onload(){       
        var arr=['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k'];
        var number_of_columns=3; // enter number of columns 
        var nrRows=Math.ceil(arr.length / number_of_columns);      
        var root=document.getElementById('mydiv');
        var tab=document.createElement('table');
        tab.className="mytable";
        var tbo=document.createElement('tbody');
        var row, cell;
        for(var i=0;i<nrRows;i++){
            row=document.createElement('tr');
            for(var j=0;j<number_of_columns;j++){
                cell=document.createElement('td');
                cell.appendChild(document.createTextNode(arr[i*number_of_columns+j]));
                row.appendChild(cell);
            }
            tbo.appendChild(row);

        }
        tab.appendChild(tbo);
        root.appendChild(tab);
}
window.onload=onload;
</script>
</head>
<body>
<div id="mydiv">  
</div>
</body>
</html>

动态表建设

1 个答案: