Currently, I am making a table. In this table, the rows have 2 cells that have input fields that take in first names and last names.
Problem: Right now, all that it does is create on row with inputs in each cell. However, the new row that gets created does not work properly (you do not need to fill out this new row to create another row, it is still picking up the first row).
Question: How can I make a table that creates a new row that have two input cells?
Note: It is important that each input is unique because I need to take the text inputted to create a list.
const table = document.querySelector('#table');
const addRowButton = document.querySelector('#addRow');
//let names = []; I'm not sure if I should use an array or a class to store the names
let rowNumber = 0; //Maybe I can use a for loop using "i"? I couldn't get that to work, though
function addRow() {
const row = table.insertRow(-1);
const cell1 = row.insertCell(0);
const cell2 = row.insertCell(1);
const firstNameInput = document.createElement("input");
const lastNameInput = document.createElement("input");
firstNameInput.type = "text";
cell1.appendChild(firstNameInput);
lastNameInput.type = "text";
cell2.appendChild(lastNameInput);
//When a first and last name is entered, a new row is added
//When this happens, the inputs should be able to pass their own values
table.addEventListener('change', () => {
if (firstNameInput == null || lastNameInput == null) {
return null;
} else if (firstNameInput.value && lastNameInput.value) {
rowNumber++;
addRow();
let firstName = firstNameInput.value;
let lastName = lastNameInput.value;
}
})
}
addRowButton.addEventListener('click', addRow);
#input-article.hidden {
display: none;
}
table {
text-align: center;
align-items: center;
}
th {
width: 50vmin;
height: 10vmin;
font-size: 20pt;
font-weight: 800;
}
input {
width: 50vmin;
height: 5vmin;
text-align: center;
align-items: center;
font-size: 18pt;
font-weight: 400;
font-family: Georgia, 'Times New Roman', Times, serif;
border: 0;
padding: 0;
}
#submit {
background-color: blue;
color: white;
border: 0;
position: absolute;
left: 95vmin;
}
#output-article.hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport", content="width=device-width, initial-scale=1.0">
<meta name="author" content="Christian Davis">
<link rel="stylesheet" href="styles.css">
<title>Random Group Generator</title>
</head>
<body>
<article id="input-article">
<table id="table" border="1">
<tr>
<th>First Name:</th>
<th>Last Name:</th>
</tr>
</table> <br>
<button id="addRow">Add Row</button>
<button id="submit">Submit</button>
</article>
<script src="app.js"></script>
</body>
</html>
2
Answers
Look, I will modify your hole code starting with the function
addRow
, try this :this code is written and still not tested, please test it (as I wrote it from mobile without a compiler in it) and tell me the results, hope this helps
pls try this. for each input added you have a new created id achieved using setAttribute. then to control adding row I used removeEventlistener togetther with addEventListener. I also used arrays to store your inputs, you can then retrieve needed data easily. You could also have added same class and used forEach with querySelectorAll