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

[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 = '';
}
< /code>
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%;
}
}

< /code>
Explanation:
HTML Table: The table with the ID dataenterygrid is where the rows will be dynamically inserted.
JavaScript: The addRow function inserts a new row at the end of the table and fills it with form fields (radio buttons, dropdowns, text inputs, and checkboxes).
CSS: The styles ensure that each table cell is properly aligned, and the form fields inside the cells are responsive and fill the available space.
Issue:
While the rows are being added dynamically as expected, the form fields in the new rows are not aligned properly. They seem misaligned compared to the existing rows, especially when the table cells contain different types of form elements (radio buttons, select dropdowns, text inputs).
What I’ve Tried:
I tried adjusting the padding, width, and text-align properties in the CSS, but the problem persists.
I made sure that the form fields in the new rows have the same classes and styles as the original rows, but the alignment still seems off.
Expected Behavior:
I want the newly added rows to maintain the same alignment and appearance as the original rows, including the radio buttons, dropdowns, text inputs, and checkboxes.
What I Need Help With:
What CSS styles should I apply to ensure the form fields in the dynamically added rows align properly with the fields in the original rows?
Are there any other adjustments I can make in the JavaScript or HTML to fix the alignment issue?

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