Создать стол Confusion

Question

У меня возникли некоторые проблемы/замешательство, и я застрял в том, куда идти отсюда.

Я экспериментирую с использованием Javascript для создания таблиц для своих данных, а затем для их отображения в HTML. Я создал таблицу HTML без драмы, но с JS, с которой у меня возникают проблемы.

Вот фотография моего ожидаемого результата:

отсюда, у меня есть следующий код, чтобы нарисовать таблицу. Тем не менее, я могу только подняться до 7-й строки, прежде чем я застрял в том, как закончить таблицу.

Я прочитал много ссылок, и я не могу понять, как это сделать!

Вот мой код до сих пор:

function drawTable3() { 
 
    var input = document.createElement("input"); 
 
    var tr = document.createElement("tr"); 
 
    var td = document.createElement("td"); 
 

 
    var div = document.getElementById("dropper") 
 

 
    //create table 
 
    var drawTable = document.createElement("table"); 
 
    drawTable.id = "dropperTable"; 
 
    drawTable.className = "tg"; 
 
    div.appendChild(drawTable); 
 

 
    var table = document.getElementById("dropperTable"); \t 
 

 
    var input = document.createElement("input"); 
 
    input.id = "D" + [i] + "Size"; 
 
    input.type = "number"; 
 

 

 
    //Create Head Elements 
 
    for (var i = 0; i < 3; i++) { 
 
    var createHead = document.createElement("th"); 
 
    if (i == 0) { 
 
     createHead.innerHTML = ""; 
 
    } else if (i == 1) { 
 
     createHead.innerHTML = "Dropper Duct Size"; 
 
    } else if (i == 2) { 
 
     createHead.innerHTML = "Dropper Duct Capacity"; 
 
    } 
 
    table.appendChild(createHead); 
 
    } \t 
 

 
    for (var i = 1; i < 7 ; i++) { 
 

 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 

 
    var cell1 = row.insertCell(0); 
 
    var dropperName = document.createElement("output"); 
 
    dropperName.id = "D" + [i] + "Size"; 
 
    dropperName.innerHTML = "Dropper Duct Side " + [i]; 
 
    cell1.appendChild(dropperName); \t \t 
 

 
    var cell2 = row.insertCell(1); 
 
    var dropperInput = document.createElement("input"); 
 
    dropperInput.type = "number"; 
 
    dropperInput.id = "D" + [i] + "Capacity"; 
 
    cell2.appendChild(dropperInput); 
 

 
    var cell3 = row.insertCell(2); 
 
    var dropperOutput = document.createElement("output"); 
 
    dropperOutput.id = "D" + [i] + "Capacity"; 
 
    cell3.appendChild(dropperOutput); \t 
 

 
    } 
 

 
} 
 

 
drawTable3();

.tg { 
 
\t border-collapse:collapse; 
 
\t border-spacing:0; 
 
\t text-align: center; 
 
\t } 
 
\t 
 
.tg td{ 
 
\t font-family:Arial, sans-serif; 
 
\t font-size:14px; 
 
\t font-weight:normal; 
 
\t padding:10px 5px; 
 
\t border-style:solid; 
 
\t border-width:1px; 
 
\t overflow:hidden; 
 
\t word-break:normal; 
 
\t text-align: center; 
 
\t } 
 
\t 
 
.tg th{ 
 
\t font-family:Arial, sans-serif; 
 
\t font-size:14px; 
 
\t font-weight:normal; 
 
\t padding:10px 5px; 
 
\t border-style:solid; 
 
\t border-width:1px; 
 
\t overflow:hidden; 
 
\t word-break:normal; 
 
\t text-align: center; 
 
\t vertical-align: top; 
 
\t } 
 
.tg .tg-s6z2{ 
 
\t text-align:center 
 
\t } 
 
\t 
 
.smallInput { 
 
\t width: 50px; 
 
\t text-align: center; 
 
\t } 
 
.roomIdent { 
 

 
} 
 

 
.factors { 
 
text-align: center; 
 
width: 80px; 
 
} 
 

 
.factors2 { 
 
text-align: center; 
 
width: 150px; 
 
} 
 
.tg2 { 
 
\t border-top-style: none; 
 
\t border-right-style: none; 
 
\t border-bottom-style: none; 
 
\t border-left-style: none; 
 
\t border-top-color: #FFF; 
 
\t border-right-color: #FFF; 
 
\t border-bottom-color: #FFF; 
 
\t border-left-color: #FFF; 
 
}

<div id="dropper"></div>

Answer 1

Некоторые комментарии на ваш код:

function drawTable3() { 
    var input = document.createElement("input"); 
    var tr = document.createElement("tr"); 
    var td = document.createElement("td"); 

тр и тд не используются в любом месте, ввод повторно инициализируется позже.

var div = document.getElementById("dropper") 

    //create table 
    var drawTable = document.createElement("table"); 
    drawTable.id = "dropperTable"; 
    drawTable.className = "tg"; 
    div.appendChild(drawTable); 

    var table = document.getElementById("dropperTable"); 

У вас уже есть ссылка на таблицу как drawTable, так почему бы не назвать его стол с самого начала? В любом случае, вышеупомянутое эквивалентно:

var table = drawTable; 

.

var input = document.createElement("input"); 

Вы уже создали вход выше, и назначили его ввода, это заменяет его другим входом.

input.id = "D" + [i] + "Size"; 

я не было присвоено значение еще (он объявлен ниже вниз, так что существует в качестве переменного), поэтому его значения не определены . Выражение [i] создаст массив [undefined], который затем преобразуется в строку из-за операторов + и других значений в выражении, являющемся строкой, возвращая пустую строку. Таким образом, присвоенный идентификатор:

'DSize' 

. input.type = "number";

//Create Head Elements 
    for (var i = 0; i < 3; i++) { 
    var createHead = document.createElement("th"); 
    if (i == 0) { 
     createHead.innerHTML = ""; 
    } else if (i == 1) { 
     createHead.innerHTML = "Dropper Duct Size"; 
    } else if (i == 2) { 
     createHead.innerHTML = "Dropper Duct Capacity"; 
    } 
    table.appendChild(createHead); 
    } 

выше может быть немного более кратким, если вы используете массив для значений и назначить их на основе значения, если я. Кроме того, если вы просто устанавливаете текстовое значение, возможно, лучше вставить текстовый узел:

var headCellValues = ['','Dropper Duct Size','Dropper Duct Capacity'];  
    for (var i = 0; i < 3; i++) { 
    var createHead = document.createElement("th"); 
    createHead.appendChild(document.createTextNode(headCellValues[i])); 
    table.appendChild(createHead); 
    } 

.

for (var i = 1; i < 7 ; i++) { 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

Это, кажется, единственное место, которое ROWCOUNT используется. Для того, чтобы добавить строку с помощью insertRow, обеспечивают значение -1:

var row = table.insertRow(-1); 

.

var cell1 = row.insertCell(0); 
    var dropperName = document.createElement("output"); 
    dropperName.id = "D" + [i] + "Size"; 

Здесь снова, [1] создает массив, который затем преобразуется в строку. Просто используйте я, чтобы сказать "D0Size":

dropperName.id = "D" + i + "Size"; 

.

dropperName.innerHTML = "Dropper Duct Side " + [i]; 

То же самое здесь, используйте:

dropperName.innerHTML = "Dropper Duct Side " + i; 
    dropperName.appendChild(document.createTextNode("Dropper Duct Side " + i)); 

То же самое должно быть применено к остальной части кода. Вы можете рассмотреть клонирование целых строк, поскольку это быстрее, чем создание всех элементов один за другим или создание отдельных функций для создания каждого типа строки. Похоже, что части заголовка и нижнего колонтитула могут быть HTML, и только промежуточные строки должны быть динамически созданы.

cell1.appendChild(dropperName);  

    var cell2 = row.insertCell(1); 
    var dropperInput = document.createElement("input"); 
    dropperInput.type = "number"; 
    dropperInput.id = "D" + [i] + "Capacity"; 
    cell2.appendChild(dropperInput); 

    var cell3 = row.insertCell(2); 
    var dropperOutput = document.createElement("output"); 
    dropperOutput.id = "D" + [i] + "Capacity"; 
    cell3.appendChild(dropperOutput); 
    } 
} 

drawTable3();