Как исправить проблему выравнивания при добавлении динамических строк с полями формы в таблицу с помощью JavaScript? ⇐ Javascript

[Anonymous]

Проблема:
Я работаю над веб-страницей, на которой мне нужно динамически добавлять строки в таблицу HTML. Каждая строка должна содержать несколько элементов формы, таких как переключатели, раскрывающиеся меню, текстовые поля и флажки. Однако когда я нажимаю кнопку «Добавить», в таблицу добавляются новые строки, но выравнивание полей формы в этих строках неправильное. Поля формы смещены по сравнению с исходными строками.
Цель:
Я хочу динамически добавлять новые строки с помощью JavaScript, обеспечивая правильное выравнивание полей формы в новых строках. те, которые находятся в существующих строках.

Код: Выделить всё

function addRow() {
// Get the table by its ID
var mytable = document.getElementById("dataenterygrid");

// Insert a new row at the end of the table
var row = mytable.insertRow(mytable.rows.length);

// Add cells to the new row for each form field
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);

// Insert form fields into each cell
cell1.innerHTML = ' Yes  No';
cell2.innerHTML = 'HomeOffice';
cell3.innerHTML = 'IndiaGermany';
cell4.innerHTML = 'State 1State 2';
cell5.innerHTML = '';
cell6.innerHTML = '';
}

Код: Выделить всё

body {
margin: 0;
background-color: whitesmoke;
}

/* First Container */
.container {
height: 30px;
padding: 5px;
padding-left: 5px;
background-color: #cdecfa;
display: flex;
justify-content: space-between;
}

h2 {
font-size: small;
}

/* Second Container including Activity */
#sysmbois {
width: 85px;
}

#question {
width: 30px;
height: 25px;
}

#twoc {
color: white;
}

.nav_container ul {
background-color: #682b80;
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding-top: 5px;
height: 20px;
padding-left: 10px;
padding-right: 10px;
color: black;
}

/* Third Container */
.in_container {
padding-top: 2.5px;
display: flex;
justify-content: left;
margin: 0;
height: 15px;
padding-left: 0.5%;
display: flex;
justify-content: left;
}

#but {
background-color: #cdecfa;
border-color: #000000;
border-style: double;
width: 100px;
height: 30px;
border-radius: 30%;
color: rgb(0, 0, 0);
}

/* Save Container */
.save_container {
height: 20px;
display: flex;
justify-content: left;
background-color: #cdecfa;
border: #682b80;
margin: 0;
}

/* Wrapper Settings All */
.container-wrapper {
margin: 8px;
position: relative;
border: aqua;
}

.container-wrapper p {
position: absolute;
top: 0;
left: 0;
margin: 0 0 0 24px;
z-index: 10;
background-color: whitesmoke;
padding: 6px;
border: 1px solid white;
}

.form-containeraddc {
border: 1px solid #682b80;
border-radius: 4px;
padding-left: 1%;
padding-right: 1%;
}

.form-containerpar {
border: 1px solid #682b80;
border-radius: 4px;
}

.form-containerother {
border: 1px solid #682b80;
border-radius: 4px;
}

.form-containermain {
border: 1px solid #682b80;
border-radius: 4px;
margin: 0;
}

/* Party Details container */
.party {
padding-left: 10px;
}

td {
padding: 0 7px;
}

.par {
border: soli #682b80;
border-width: 1px;
background-color: whitesmoke;
}

.hide {
width: 180px;
}

#country {
margin: 0;
}

/* Address Details &  Contact*/
.tab {
border-collapse: collapse;
width: 100%;
}

.in {
border: 0;
outline: 0;
width: 100%;
justify-content: center;
display: flex;
background-color: whitesmoke;
}

#drop {
width: 200px;
}

#dropn {
width: 150px;
}

.tab th {
background-color: #cdecfa;
}

#addbut {
width: 100%;
height: 100%;
}

#addbuto {
width: 100%;
height: 100%;
}

/* Other info  */
#otherinf {
margin-bottom: 0;
}

/* Responsive for smaller screens */
@media only screen and (max-width: 600px) {
/* Stack the navigation vertically */
.nav_container ul {
flex-direction: column;
}

.container-wrapper p {
font-size: 14px;
}

table, th, td {
font-size: 12px; /* Adjust font size */
}

td, th {
padding: 6px;
}

/* Ensure form elements take up full width */
input[type="text"], select, button {
width: 100%;
box-sizing: border-box;
}

#addbut {
width: 100%;
}
}

Объяснение:
Таблица HTML: таблица с идентификатором dataenterygrid — это место, куда строки будут динамически вставлены.
JavaScript: функция addRow вставляет новую строку в конец таблицы и заполняет ее полями формы (переключателями, раскрывающимися списками, текстовыми вводами и флажками).
CSS: стили обеспечивают правильное выравнивание каждой ячейки таблицы, а поля формы внутри ячеек реагирует и заполняет доступное пространство.
Проблема:
Хотя строки добавляются динамически, как и ожидалось, поля формы в новых строках не выравниваются должным образом. Они кажутся смещенными по сравнению с существующими строками, особенно когда ячейки таблицы содержат элементы формы разных типов (переключатели, раскрывающиеся списки выбора, текстовые поля).
Что я пробовал:
Я попытался настроить свойства отступов, ширины и выравнивания текста в CSS, но проблема не устранена.
Я убедился, что поля формы в новых строках имеют те же классы и стили, что и исходные строки, но расклад все равно кажется выключено.
Ожидаемое поведение:
Я хочу, чтобы вновь добавленные строки сохраняли то же выравнивание и внешний вид, что и исходные строки, включая переключатели, раскрывающиеся списки, текстовые поля и флажки. .
В чем мне нужна помощь:
Какие стили CSS мне следует применить, чтобы поля формы в динамически добавляемых строках правильно совпадали с полями в исходных строках?
/>Есть ли еще какие изменения я могу внести в JavaScript или HTML, чтобы устранить проблему выравнивания?

Подробнее здесь: https://stackoverflow.com/questions/793 ... ields-in-a