I am currently learning the fundamentals of JavaScript and HTML5 with a project in mind. My goal is to develop a cookbook application where users can input their recipes. These recipes will be stored in an array and displayed in a table using a for loop. Users will also have the ability to edit the table entries. An important feature I am trying to implement is automatic deletion of empty rows in the table. I initially attempted to use CSS styling with display: none, but it did not yield the desired result. Below is my CSS code for the table:
form.addEventListener("submit", function (event) {
let titleRow = table.insertRow();
let stepsRow = table.insertRow();
let titleCell = titleRow.insertCell();
let stepsCell = stepsRow.insertCell();
titleCell.innerHTML = inputTitle.value;
stepsCell.innerHTML = inputSteps.value;
titleCell.contentEditable = true;
stepsCell.contentEditable = true;
inputTitle.value = inputTitle.defaultValue;
inputSteps.value = inputSteps.defaultValue;
}, false);td: empty {
display: none;
}
tr: empty {
display: none;
}<form id="form">
<label>Insert Recipe: </label>
<textarea id = "inputTitle" rows="1" cols="50" placeholder="Recipe Title"></textarea>
<textarea id = "inputSteps" rows = "5" cols = "50" placeholder="Recipe Steps"></textarea>
<button type="submit">Add Recipe</button>
</form>
<table id = "table"></table>The table element represents an HTML5 table, while inputTitle and inputSteps are references to different textareas.
I acknowledge that there may be errors in my JavaScript implementation.
Your insights and assistance are greatly appreciated!