Javascript 创建三个带有标题的表

我试着在一个表中循环，创建三个可点击div的表，每个表都有一个标题，理想情况下使用一个单独的类使它们看起来不同。我尝试使用带有三个if语句的while循环，但是标题没有正确显示。所有三个仍然显示为普通div，而不是不同的类，但第一个包含第三列标题的第二个副本，标题正确，第二个标题包含第一个标题的第二个副本，同样包含正确的类

JS代码段

var table = [


        "Column Title", "#", 2,2,
        "Column Item", "website.com", 1, 3,
        "Column Item 2", "website2.com", 2, 3,
        // Etc.
];
var camera, scene, renderer;
var controls;

var objects = [];
var targets = { table: [], sphere: [], helix: [], grid: [] };

init();
animate();

function init() {

    for ( var i = 0; i < table.length; i += 4 ) {

        if(i === 0){
                var courtsTitle = document.createElement('div');
                courtsTitle.className = 'listTitle';
                courtsTitle.innerHTML = "<p>Column Title</p>";

                var object = new THREE.CSS3DObject( courtsTitle );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );


                var object = new THREE.Object3D();
                object.position.x = ( 6 * 480 ) - 2900;
                object.position.y = - ( 2 * 340 ) + 1550;

                targets.table.push( object );
            }
            if(i === 14){
                var departmentsTitle = document.createElement('div');
                departmentsTitle.className = 'listTitle';
                departmentsTitle.innerHTML = "<p>Column Title2</p>";

                var object = new THREE.CSS3DObject( departmentsTitle );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );


                var object = new THREE.Object3D();
                object.position.x = ( 10 * 480 ) - 2900;
                object.position.y = - ( 2 * 340 ) + 1550;

                targets.table.push( object );
            }

            if(i === 28){
                var servicesTitle = document.createElement('div');
                servicesTitle.className = 'listTitle';
                servicesTitle.innerHTML = "<p>Column Title3</p>";

                var object = new THREE.CSS3DObject( servicesTitle );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );

                //

                var object = new THREE.Object3D();
                object.position.x = ( 2 * 480 ) - 2900;
                object.position.y = - ( 2 * 340 ) + 1550;

                targets.table.push( object );
            } else {
                var department = document.createElement('a');
                department.className = 'department';
                department.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
                department.setAttribute('href', table[i + 1]);
                department.setAttribute('target', "_blank");

                var link = document.createElement('div');
                link.className = 'link';
                link.innerHTML = table[i];
                department.appendChild(link);

                /*Random Starting point*/
                var object = new THREE.CSS3DObject( department );
                object.position.x = Math.random() * 4000 - 2000;
                object.position.y = Math.random() * 4000 - 2000;
                object.position.z = Math.random() * 4000 - 2000;
                scene.add( object );

                objects.push( object );


                /*Final position*/
                var object = new THREE.Object3D();
                object.position.x = ( table[ i + 2 ] * 480 ) - 2900;
                object.position.y = - ( table[ i + 3 ] * 340 ) + 1550;

                targets.table.push( object );
            } 

}   

---

我不太了解你的第一个数组，你能链接一个JSFIDLE或codepen，或者在这个数组中描述一个完整的表，这样我们就可以重现你的问题吗？注意：1。您可以使用数组的数组，使增量为1，并简化for循环？2.很抱歉，我现在不能，但基本上第一项是标题，第二项是url，第三项是x-location，第四项是y-location，这四项都是一起的。然后第五、第六、第七、第八项是下一项，等等。是的，数组听起来是个好主意。原来这个数组简单多了，而且还在不断增长，哈哈，谢谢！