Problem:
I’m working on a web page where I need to dynamically add rows to an HTML table. Each row should contain several form elements, such as radio buttons, dropdown menus, text inputs, and checkboxes. However, when I click the “Add” button, new rows are added to the table, but the alignment of the form fields in those rows is not correct. The form fields are misaligned compared to the original rows.
Goal:
I want to add new rows dynamically using JavaScript, ensuring that the form fields in the new rows align correctly with those in the existing rows.
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 = '<input type="radio" name="primary" value="Yes"> Yes <input type="radio" name="primary" value="No"> No';
cell2.innerHTML = '<select name="addressType"><option value="home">Home</option><option value="office">Office</option></select>';
cell3.innerHTML = '<select name="country"><option value="india">India</option><option value="germany">Germany</option></select>';
cell4.innerHTML = '<select name="state"><option value="state1">State 1</option><option value="state2">State 2</option></select>';
cell5.innerHTML = '<input type="text" name="pincode" maxlength="6">';
cell6.innerHTML = '<input type="checkbox" name="deleteRow">';
}
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%;
}
}
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?