Создание таблицы с javascript

Question

Я пытаюсь создать таблицу с javascript. У меня есть следующий код -

function resultCreate(){
    var tbl = document.createElement('table');
    tbl.style.width = '500px';
    tbl.style.marginTop = '30px';
    tbl.style.border = '1px solid black';
    for(var i=0;i<6;i++){
        var tr = tbl.insertRow();
        tr.style.border = '1px sold black';
        for(var j=0;j<6;j++){
            if(i === 0 && (j === 3 || j === 4 || j === 5)){
                break;
            }

            else if(i === 1 && (j === 0 || j === 1)){
                var td = tr.insertCell();
                td.style.border = '1px sold black';
            }

            else{
                var td = tr.insertCell();
                td.appendChild(document.createTextNode('hello'));
                td.style.border = '1px sold black';
                if(i === 0 && j === 2){ 
                    td.setAttribute('colSpan', '4');
                }
                if(i === 2 && j === 0){
                    td.setAttribute('rowSpan', '4');
                }
            }
        }
    }
    body.appendChild(tbl);
}

resultCreate();

Это создает следующую таблицу -

Я не хочу последний столбец. Я попытался использовать тот же лог c, что и мой colSpan, добавив

else if((i == 3 && j == 0) || (i == 4 && j == 0) || (i == 5 && j == 0)){
                break;
}

, но он удаляет все 3, 4 и 5 строки, кроме первого столбца.

Весь код выглядит так -

function resultCreate(){
    var tbl = document.createElement('table');
    tbl.style.width = '500px';
    tbl.style.marginTop = '30px';
    tbl.style.border = '1px solid black';
    for(var i=0;i<6;i++){
        var tr = tbl.insertRow();
        tr.style.border = '1px sold black';
        for(var j=0;j<6;j++){
            if(i === 0 && (j === 3)){
                break;
            }
            else if((i == 3 && j == 0) || (i == 4 && j == 0) || (i == 5 && j == 0)){
                break;
            }
            else if(i === 1 && (j === 0 || j === 1)){
                var td = tr.insertCell();
                td.style.border = '1px sold black';
            }

            else{
                var td = tr.insertCell();
                td.appendChild(document.createTextNode('hello'));
                td.style.border = '1px sold black';
                if(i === 0 && j === 2){ 
                    td.setAttribute('colSpan', '4');
                }
                if(i === 2 && j === 0){
                    td.setAttribute('rowSpan', '4');
                }
            }
        }
    }
    body.appendChild(tbl);
}

resultCreate();

Кто-нибудь может мне помочь, пожалуйста? Заранее спасибо!

Answer 1

Как вы можете видеть ниже, «i == 2, j == 0» с colspan = 4 занимает место, поэтому «i == 3-> 5, j == 0» вставляется во второй столбец, поэтому в результате в конце добавляется дополнительный столбец.

function resultCreate(){
    var tbl = document.createElement('table');
    tbl.style.width = '500px';
    tbl.style.marginTop = '30px';
    tbl.style.border = '1px solid black';
    for(var i=0;i<6;i++){
        var tr = tbl.insertRow();
        tr.style.border = '1px solid blue';
        for(var j=0;j<6;j++){
            if(i === 0 && (j === 3 || j === 4 || j === 5)){
                break;
            }
            else if(i === 1 && (j === 0 || j === 1)){
                var td = tr.insertCell();
                td.style.border = '1px solid green';
            }

            else{
                var td = tr.insertCell();
                td.appendChild(document.createTextNode('i='+i+' j='+j));
                td.style.border = '1px solid yellow';
                if(i === 0 && j === 2){ 
                    td.setAttribute('colSpan', '4');
                }
                if(i === 2 && j === 0){
                    td.setAttribute('rowSpan', '4');
                }
            }
        }
    }
    document.body.appendChild(tbl);
}

resultCreate();

Приведенное ниже решение точно соответствует вашим намерениям, игнорируя i == 3-> 5 и j == 0. Но любое решение, которое игнорирует один набор столбцов i = 3-> 5 (i> 2), будет работать.

function resultCreate(){
    var tbl = document.createElement('table');
    tbl.style.width = '500px';
    tbl.style.marginTop = '30px';
    tbl.style.border = '1px solid black';
    for(var i=0;i<6;i++){
        var tr = tbl.insertRow();
        tr.style.border = '1px solid blue';
        for(var j=0;j<6;j++){
            if(i >=3 && j === 0 ) continue; 
            if(i === 0 && (j === 3 || j === 4 || j === 5)){
                break;
            }
            else if(i === 1 && (j === 0 || j === 1)){
                var td = tr.insertCell();
                td.style.border = '1px solid green';
            }

            else{
                var td = tr.insertCell();
                td.appendChild(document.createTextNode(i+' '+j));
                td.style.border = '1px solid yellow';
                if(i === 0 && j === 2){ 
                    td.setAttribute('colSpan', '4');
                }
                if(i === 2 && j === 0){
                    td.setAttribute('rowSpan', '4');
                }
            }
        }
    }
    document.body.appendChild(tbl);
}

resultCreate();

Также вы написали solid неправильно, поэтому границы ячеек фактически не отображаются.

Answer 2

Попробуйте это:

  function resultCreate(){
        var tbl = document.createElement('table');
        tbl.style.width = '500px';
        tbl.style.marginTop = '30px';
        tbl.style.border = '1px solid black';
        for(var i=0;i<6;i++){
            var tr = tbl.insertRow();
            tr.style.border = '1px sold black';
            for(var j=0;j<6;j++){
                if(i === 0 && (j === 3 || j === 4 || j === 5)){
                    break;
                }
                else if( i > 2 && j === 5){
                    break;
                }
                else if(i === 1 && (j === 0 || j === 1)){
                    var td = tr.insertCell();
                    td.style.border = '1px sold black';
                }

                else{
                    var td = tr.insertCell();
                    td.appendChild(document.createTextNode('hello'));
                    td.style.border = '1px sold black';
                    if(i === 0 && j === 2){ 
                        td.setAttribute('colSpan', '4');
                    }
                    if(i === 2 && j === 0){
                        td.setAttribute('rowSpan', '4');
                    }

                }
            }
        }
        body.appendChild(tbl);
    }

    resultCreate();