使用标题创建三个表

Question

我试图在表中循环并创建三个可点击的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 );
            } 

}