Добавление строк в таблицу по мере заполнения

Question

Подскажите как правильно написать скрипт который бы убирал и добавлял строкам таблиц стиль display: none если заполнена предыдущая строка этой таблицы. В начале дается пустая таблица, как только пользователь вводит хотя бы в одно поле этой строки что либо, то у следующей строки убирается стиль style="display: none;", но потом если он удалил всё из ячеек этой строки то стиль автоматически добавляется. Но, нужно что бы удалялась только пустая строка, если в ней что ни будь находится то она не удаляется. Впринцепе, что то получилось, но только с одной строкой почему то работает. И таких таблиц на странице планируется несколько. У каждой таблице свой класс и свой ID, каждая ячейка имеет своё индивидуальное имя и каждая строка имеет свой класс.

let inputs1 = table1.querySelectorAll('input');
inputs1.forEach(inp => inp.addEventListener('keyup', function() {
  let inputsEmpty = true;
  inputs1.forEach(function(inp) {
    inputsEmpty = (inp.value.length !== 0) ? false : inputsEmpty;
  });
  let str = table1.querySelector('.str');
  if (!inputsEmpty) {
    str.style.display = '';
  } else {
    str.style.display = 'none'
  }


}));

td table {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="iksweb tabl-1" id="table1">
  <tbody>
    <tr class="tabl-stroka title">
      <td>Колонка 1</td>
      <td>Колонка 2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr class="stroka-163">
      <td><input type="text" class="inputtext" name="form_text_163"></td>
      <td><input type="text" class="inputtext" name="form_text_219"></td>
      <td><input type="text" class="inputtext" name="form_text_220"></td>
      <td><input type="text" class="inputtext" name="form_text_221"></td>
    </tr>
    <tr style="display: none;" class="str stroka-221">
      <td><input type="text" class="inputtext" name="form_text_222"></td>
      <td><input type="text" class="inputtext" name="form_text_223"></td>
      <td><input type="text" class="inputtext" name="form_text_224"></td>
      <td><input type="text" class="inputtext" name="form_text_225"></td>
    </tr>
    <tr style="display: none;" class="str stroka-225">
      <td><input type="text" class="inputtext" name="form_text_226"></td>
      <td><input type="text" class="inputtext" name="form_text_227"></td>
      <td><input type="text" class="inputtext" name="form_text_228"></td>
      <td><input type="text" class="inputtext" name="form_text_229"></td>
    </tr>
    <tr style="display: none;" class="str stroka-229">
      <td><input type="text" class="inputtext" name="form_text_230"></td>
      <td><input type="text" class="inputtext" name="form_text_231"></td>
      <td><input type="text" class="inputtext" name="form_text_232"></td>
      <td><input type="text" class="inputtext" name="form_text_233"></td>
    </tr>
    <tr style="display: none;" class="str stroka-233">
      <td><input type="text" class="inputtext" name="form_text_234"></td>
      <td><input type="text" class="inputtext" name="form_text_235"></td>
      <td><input type="text" class="inputtext" name="form_text_236"></td>
      <td><input type="text" class="inputtext" name="form_text_237"></td>
    </tr>
    <tr style="display: none;" class="str stroka-237">
      <td><input type="text" class="inputtext" name="form_text_238"></td>
      <td><input type="text" class="inputtext" name="form_text_239"></td>
      <td><input type="text" class="inputtext" name="form_text_240"></td>
      <td><input type="text" class="inputtext" name="form_text_241"></td>
    </tr>
    <tr style="display: none;" class="str stroka-241">
      <td><input type="text" class="inputtext" name="form_text_242"></td>
      <td><input type="text" class="inputtext" name="form_text_243"></td>
      <td><input type="text" class="inputtext" name="form_text_244"></td>
      <td><input type="text" class="inputtext" name="form_text_245"></td>
    </tr>
    <tr style="display: none;" class="str stroka-245">
      <td><input type="text" class="inputtext" name="form_text_246"></td>
      <td><input type="text" class="inputtext" name="form_text_247"></td>
      <td><input type="text" class="inputtext" name="form_text_248"></td>
      <td><input type="text" class="inputtext" name="form_text_249"></td>
    </tr>
    <tr style="display: none;" class="str stroka-249">
      <td><input type="text" class="inputtext" name="form_text_250"></td>
      <td><input type="text" class="inputtext" name="form_text_251"></td>
      <td><input type="text" class="inputtext" name="form_text_252"></td>
      <td><input type="text" class="inputtext" name="form_text_253"></td>
    </tr>
    <tr style="display: none;" class="str stroka-253">
      <td><input type="text" class="inputtext" name="form_text_254"></td>
      <td><input type="text" class="inputtext" name="form_text_255"></td>
      <td><input type="text" class="inputtext" name="form_text_256"></td>
      <td><input type="text" class="inputtext" name="form_text_257"></td>
    </tr>
    <tr style="display: none;" class="str stroka-257">
      <td><input type="text" class="inputtext" name="form_text_258"></td>
      <td><input type="text" class="inputtext" name="form_text_259"></td>
      <td><input type="text" class="inputtext" name="form_text_260"></td>
      <td><input type="text" class="inputtext" name="form_text_261"></td>
    </tr>
    <tr style="display: none;" class="str stroka-261">
      <td><input type="text" class="inputtext" name="form_text_262"></td>
      <td><input type="text" class="inputtext" name="form_text_263"></td>
      <td><input type="text" class="inputtext" name="form_text_264"></td>
      <td><input type="text" class="inputtext" name="form_text_265"></td>
    </tr>
    <tr style="display: none;" class="str stroka-265">
      <td><input type="text" class="inputtext" name="form_text_266"></td>
      <td><input type="text" class="inputtext" name="form_text_267"></td>
      <td><input type="text" class="inputtext" name="form_text_268"></td>
      <td><input type="text" class="inputtext" name="form_text_269"></td>
    </tr>
    <tr style="display: none;" class="str stroka-269">
      <td><input type="text" class="inputtext" name="form_text_270"></td>
      <td><input type="text" class="inputtext" name="form_text_271"></td>
      <td><input type="text" class="inputtext" name="form_text_272"></td>
      <td><input type="text" class="inputtext" name="form_text_273"></td>
    </tr>
    <tr style="display: none;" class="str stroka-273">
      <td><input type="text" class="inputtext" name="form_text_274"></td>
      <td><input type="text" class="inputtext" name="form_text_275"></td>
      <td><input type="text" class="inputtext" name="form_text_276"></td>
      <td><input type="text" class="inputtext" name="form_text_277"></td>
    </tr>
    <tr style="display: none;" class="str stroka-277">
      <td><input type="text" class="inputtext" name="form_text_278"></td>
      <td><input type="text" class="inputtext" name="form_text_279"></td>
      <td><input type="text" class="inputtext" name="form_text_280"></td>
      <td><input type="text" class="inputtext" name="form_text_281"></td>
    </tr>
    <tr style="display: none;" class="str stroka-281">
      <td><input type="text" class="inputtext" name="form_text_282"></td>
      <td><input type="text" class="inputtext" name="form_text_283"></td>
      <td><input type="text" class="inputtext" name="form_text_284"></td>
      <td><input type="text" class="inputtext" name="form_text_285"></td>
    </tr>
    <tr style="display: none;" class="str stroka-285">
      <td><input type="text" class="inputtext" name="form_text_286"></td>
      <td><input type="text" class="inputtext" name="form_text_287"></td>
      <td><input type="text" class="inputtext" name="form_text_288"></td>
      <td><input type="text" class="inputtext" name="form_text_289"></td>
    </tr>
    <tr style="display: none;" class="str stroka-289">
      <td><input type="text" class="inputtext" name="form_text_290"></td>
      <td><input type="text" class="inputtext" name="form_text_291"></td>
      <td><input type="text" class="inputtext" name="form_text_292"></td>
      <td><input type="text" class="inputtext" name="form_text_293"></td>
    </tr>
    <tr style="display: none;" class="str stroka-293">
      <td><input type="text" class="inputtext" name="form_text_294"></td>
      <td><input type="text" class="inputtext" name="form_text_295"></td>
      <td><input type="text" class="inputtext" name="form_text_296"></td>
      <td><input type="text" class="inputtext" name="form_text_297"></td>
    </tr>
    <tr style="display: none;" class="str stroka-297">
      <td><input type="text" class="inputtext" name="form_text_298"></td>
      <td><input type="text" class="inputtext" name="form_text_299"></td>
      <td><input type="text" class="inputtext" name="form_text_300"></td>
      <td><input type="text" class="inputtext" name="form_text_301"></td>
    </tr>
    <tr style="display: none;" class="str stroka-301">
      <td><input type="text" class="inputtext" name="form_text_302"></td>
      <td><input type="text" class="inputtext" name="form_text_303"></td>
      <td><input type="text" class="inputtext" name="form_text_304"></td>
      <td><input type="text" class="inputtext" name="form_text_305"></td>
    </tr>
    <tr style="display: none;" class="str stroka-305">
      <td><input type="text" class="inputtext" name="form_text_306"></td>
      <td><input type="text" class="inputtext" name="form_text_307"></td>
      <td><input type="text" class="inputtext" name="form_text_308"></td>
      <td><input type="text" class="inputtext" name="form_text_309"></td>
    </tr>
    <tr style="display: none;" class="str stroka-309">
      <td><input type="text" class="inputtext" name="form_text_310"></td>
      <td><input type="text" class="inputtext" name="form_text_311"></td>
      <td><input type="text" class="inputtext" name="form_text_312"></td>
      <td><input type="text" class="inputtext" name="form_text_313"></td>
    </tr>
    <tr style="display: none;" class="str stroka-313">
      <td><input type="text" class="inputtext" name="form_text_314"></td>
      <td><input type="text" class="inputtext" name="form_text_315"></td>
      <td><input type="text" class="inputtext" name="form_text_316"></td>
      <td><input type="text" class="inputtext" name="form_text_317"></td>
    </tr>
    <tr style="display: none;" class="str stroka-317">
      <td><input type="text" class="inputtext" name="form_text_318"></td>
      <td><input type="text" class="inputtext" name="form_text_319"></td>
      <td><input type="text" class="inputtext" name="form_text_320"></td>
      <td><input type="text" class="inputtext" name="form_text_321"></td>
    </tr>
    <tr style="display: none;" class="str stroka-321">
      <td><input type="text" class="inputtext" name="form_text_322"></td>
      <td><input type="text" class="inputtext" name="form_text_323"></td>
      <td><input type="text" class="inputtext" name="form_text_324"></td>
      <td><input type="text" class="inputtext" name="form_text_325"></td>
    </tr>
    <tr style="display: none;" class="str stroka-325">
      <td><input type="text" class="inputtext" name="form_text_326"></td>
      <td><input type="text" class="inputtext" name="form_text_327"></td>
      <td><input type="text" class="inputtext" name="form_text_328"></td>
      <td><input type="text" class="inputtext" name="form_text_329"></td>
    </tr>
    <tr style="display: none;" class="str stroka-329">
      <td><input type="text" class="inputtext" name="form_text_330"></td>
      <td><input type="text" class="inputtext" name="form_text_331"></td>
      <td><input type="text" class="inputtext" name="form_text_332"></td>
      <td><input type="text" class="inputtext" name="form_text_333"></td>
    </tr>
    <tr style="display: none;" class="str stroka-333">
      <td><input type="text" class="inputtext" name="form_text_334"></td>
      <td><input type="text" class="inputtext" name="form_text_335"></td>
      <td><input type="text" class="inputtext" name="form_text_336"></td>
      <td><input type="text" class="inputtext" name="form_text_337"></td>
    </tr>
    <tr style="display: none;" class="str stroka-337">
      <td><input type="text" class="inputtext" name="form_text_338"></td>
      <td><input type="text" class="inputtext" name="form_text_339"></td>
      <td><input type="text" class="inputtext" name="form_text_340"></td>
      <td><input type="text" class="inputtext" name="form_text_341"></td>
    </tr>
    <tr style="display: none;" class="str stroka-341">
      <td><input type="text" class="inputtext" name="form_text_342"></td>
      <td><input type="text" class="inputtext" name="form_text_343"></td>
      <td><input type="text" class="inputtext" name="form_text_344"></td>
      <td><input type="text" class="inputtext" name="form_text_345"></td>
    </tr>
    <tr style="display: none;" class="str stroka-345">
      <td><input type="text" class="inputtext" name="form_text_346"></td>
      <td><input type="text" class="inputtext" name="form_text_347"></td>
      <td><input type="text" class="inputtext" name="form_text_348"></td>
      <td><input type="text" class="inputtext" name="form_text_349"></td>
    </tr>
    <tr style="display: none;" class="str stroka-349">
      <td><input type="text" class="inputtext" name="form_text_350"></td>
      <td><input type="text" class="inputtext" name="form_text_351"></td>
      <td><input type="text" class="inputtext" name="form_text_352"></td>
      <td><input type="text" class="inputtext" name="form_text_353"></td>
    </tr>
    <tr style="display: none;" class="str stroka-353">
      <td><input type="text" class="inputtext" name="form_text_354"></td>
      <td><input type="text" class="inputtext" name="form_text_355"></td>
      <td><input type="text" class="inputtext" name="form_text_356"></td>
      <td><input type="text" class="inputtext" name="form_text_357"></td>
    </tr>
    <tr style="display: none;" class="str stroka-357">
      <td><input type="text" class="inputtext" name="form_text_358"></td>
      <td><input type="text" class="inputtext" name="form_text_359"></td>
      <td><input type="text" class="inputtext" name="form_text_360"></td>
      <td><input type="text" class="inputtext" name="form_text_361"></td>
    </tr>
    <tr style="display: none;" class="str stroka-361">
      <td><input type="text" class="inputtext" name="form_text_362"></td>
      <td><input type="text" class="inputtext" name="form_text_363"></td>
      <td><input type="text" class="inputtext" name="form_text_364"></td>
      <td><input type="text" class="inputtext" name="form_text_365"></td>
    </tr>
    <tr style="display: none;" class="str stroka-365">
      <td><input type="text" class="inputtext" name="form_text_366"></td>
      <td><input type="text" class="inputtext" name="form_text_367"></td>
      <td><input type="text" class="inputtext" name="form_text_368"></td>
      <td><input type="text" class="inputtext" name="form_text_369"></td>
    </tr>
    <tr style="display: none;" class="str stroka-369">
      <td><input type="text" class="inputtext" name="form_text_370"></td>
      <td><input type="text" class="inputtext" name="form_text_371"></td>
      <td><input type="text" class="inputtext" name="form_text_372"></td>
      <td><input type="text" class="inputtext" name="form_text_373"></td>
    </tr>
    <tr style="display: none;" class="str stroka-373">
      <td><input type="text" class="inputtext" name="form_text_374"></td>
      <td><input type="text" class="inputtext" name="form_text_375"></td>
      <td><input type="text" class="inputtext" name="form_text_376"></td>
      <td><input type="text" class="inputtext" name="form_text_377"></td>
    </tr>
    <tr style="display: none;" class="str stroka-377">
      <td><input type="text" class="inputtext" name="form_text_378"></td>
      <td><input type="text" class="inputtext" name="form_text_379"></td>
      <td><input type="text" class="inputtext" name="form_text_380"></td>
      <td><input type="text" class="inputtext" name="form_text_381"></td>
    </tr>
    <tr style="display: none;" class="str stroka-381">
      <td><input type="text" class="inputtext" name="form_text_382"></td>
      <td><input type="text" class="inputtext" name="form_text_383"></td>
      <td><input type="text" class="inputtext" name="form_text_384"></td>
      <td><input type="text" class="inputtext" name="form_text_385"></td>
    </tr>
    <tr style="display: none;" class="str stroka-385">
      <td><input type="text" class="inputtext" name="form_text_386"></td>
      <td><input type="text" class="inputtext" name="form_text_387"></td>
      <td><input type="text" class="inputtext" name="form_text_388"></td>
      <td><input type="text" class="inputtext" name="form_text_389"></td>
    </tr>
    <tr style="display: none;" class="str stroka-389">
      <td><input type="text" class="inputtext" name="form_text_390"></td>
      <td><input type="text" class="inputtext" name="form_text_391"></td>
      <td><input type="text" class="inputtext" name="form_text_392"></td>
      <td><input type="text" class="inputtext" name="form_text_393"></td>
    </tr>
    <tr style="display: none;" class="str stroka-393">
      <td><input type="text" class="inputtext" name="form_text_394"></td>
      <td><input type="text" class="inputtext" name="form_text_395"></td>
      <td><input type="text" class="inputtext" name="form_text_396"></td>
      <td><input type="text" class="inputtext" name="form_text_397"></td>
    </tr>
    <tr style="display: none;" class="str stroka-397">
      <td><input type="text" class="inputtext" name="form_text_398"></td>
      <td><input type="text" class="inputtext" name="form_text_399"></td>
      <td><input type="text" class="inputtext" name="form_text_400"></td>
      <td><input type="text" class="inputtext" name="form_text_401"></td>
    </tr>
    <tr style="display: none;" class="str stroka-401">
      <td><input type="text" class="inputtext" name="form_text_402"></td>
      <td><input type="text" class="inputtext" name="form_text_403"></td>
      <td><input type="text" class="inputtext" name="form_text_404"></td>
      <td><input type="text" class="inputtext" name="form_text_405"></td>
    </tr>
    <tr style="display: none;" class="str stroka-405">
      <td><input type="text" class="inputtext" name="form_text_406"></td>
      <td><input type="text" class="inputtext" name="form_text_407"></td>
      <td><input type="text" class="inputtext" name="form_text_408"></td>
      <td><input type="text" class="inputtext" name="form_text_409"></td>
    </tr>
    <tr style="display: none;" class="str stroka-409">
      <td><input type="text" class="inputtext" name="form_text_410"></td>
      <td><input type="text" class="inputtext" name="form_text_411"></td>
      <td><input type="text" class="inputtext" name="form_text_412"></td>
      <td><input type="text" class="inputtext" name="form_text_413"></td>
    </tr>
    <tr style="display: none;" class="str stroka-413">
      <td><input type="text" class="inputtext" name="form_text_414"></td>
      <td><input type="text" class="inputtext" name="form_text_415"></td>
      <td><input type="text" class="inputtext" name="form_text_416"></td>
      <td><input type="text" class="inputtext" name="form_text_417"></td>
    </tr>
    <tr style="display: none;" class="str stroka-417"></tr>
  </tbody>
</table>

БЛОГ НА HUSL

Добавление строк в таблицу по мере заполнения

Ответы (0 шт):