Можно ли скрыть пустую строку <table>с помощью CSS?

Question

Я только начинаю изучать основы JavaScript и HTML5. Я пытаюсь создать приложение с поваренной книгой, в которое пользователи могут добавлять рецепты. Эти рецепты хранятся внутри массива и проходят через таблицу с помощью l oop. Пользователь также может редактировать таблицу. Одна из основных функций должна заключаться в том, что когда строка таблицы пуста, она автоматически удаляется. Я пробовал использовать display: none с CSS, но это не сработало. Вот мой CSS для таблицы:

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>

Элемент table относится к таблице HTML5, inputTitle относится к таблице textarea, а inputSteps относится к разные textarea.

У меня могут быть ошибки в JavaScript.

Заранее спасибо!

Answer 1

Во-первых, поскольку вы не отправляете данные на какой-либо другой ресурс, вам не следует использовать кнопку form или submit.

Теперь самое простое решение - просто выполнить проверка входных данных перед построением таблицы. если вход пуст, не создавайте эти строки.

Наконец, не используйте .innerHTML, если строка, с которой вы работаете, не содержит HTML. Используйте вместо него .textContent, потому что .innerHTML имеет соображения производительности и безопасности.

let inputTitle = document.getElementById("inputTitle");
let inputSteps = document.getElementById("inputSteps");

document.querySelector("button").addEventListener("click", function (event) {
  // First, just check to see if there was valid input
  if(!inputTitle.value || !inputSteps.value){
    alert("You must fill in a title and a recipe");
    return;  // Exit function
  }
  let titleRow = table.insertRow();
  let stepsRow = table.insertRow();
  let titleCell = titleRow.insertCell();
  let stepsCell = stepsRow.insertCell();
  titleCell.textContent = inputTitle.value;
  stepsCell.textContent = inputSteps.value;
  titleCell.contentEditable = true;
  stepsCell.contentEditable = true;
});

<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="button">Add Recipe</button>
<table id = "table"></table>