Зависимость от input

198

15 января 2019, 23:10

Есть таблица вот такая, все данные подгружаются из БД, каждый раз количество столбцов может быть разное.

я её заполняю и потом нажимаю на кнопку сохранить,но мне нужно сделать так, что бы где мы оценку не поставил,то есть инпут в "кількість балі" будет null, то и на против соответствующие "дата складання", "тип відомості", "номер відомості" будет записываться в БД со значением null.Помогите пожалуйста)

Answer 1

const rows = document.querySelectorAll('.my-row') 
 
;[...rows].forEach(function (row) { 
  const input = row.querySelector('.my-input') 
  const select1 = row.querySelector('.my-select1') 
  const select2 = row.querySelector('.my-select2') 
  const myDate = row.querySelector('.my-date') 
  let oldInput = input.value 
   
  input.oninput = function () { 
    const val = input.value 
    const options = [...select1.options] 
    const optionsFiltered = options.filter(i => +i.dataset.value >= val) 
    const option = optionsFiltered[optionsFiltered.length - 1] 
     
    if (val === '') { 
      myDate.value = null 
      select1.selectedIndex = select2.selectedIndex = 0 
      return 
    } 
 
    if (!option) { 
      input.value = oldInput 
      return alert('Не допустимая оценка') 
    } 
 
    const index = options.indexOf(option) 
 
    select1.selectedIndex = select2.selectedIndex = index 
    oldInput = val 
  } 
})

.my-row { 
  margin-bottom: 10px; 
}

<div class="my-row"> 
  <input class="my-input" type="number"> 
 
  <select class="my-select1"> 
    <option disabled selected hidden value=""></option> 
    <option data-value="100" value="божественно">божественно</option> 
    <option data-value="70" value="отлично">отлично</option> 
    <option data-value="40" value="хорошо">хорошо</option> 
    <option data-value="10" value="плохо">плохо</option> 
    <option data-value="0" value="отвратительно">отвратительно</option> 
  </select> 
 
  <select class="my-select2"> 
    <option disabled selected hidden value=""></option> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
    <option>D</option> 
    <option>F</option> 
  </select> 
   
  <input class="my-date" type="date"> 
</div> 
 
<div class="my-row"> 
  <input class="my-input" type="number"> 
 
  <select class="my-select1"> 
    <option disabled selected hidden value=""></option> 
    <option data-value="100" value="божественно">божественно</option> 
    <option data-value="70" value="отлично">отлично</option> 
    <option data-value="40" value="хорошо">хорошо</option> 
    <option data-value="10" value="плохо">плохо</option> 
    <option data-value="0" value="отвратительно">отвратительно</option> 
  </select> 
 
  <select class="my-select2"> 
    <option disabled selected hidden value=""></option> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
    <option>D</option> 
    <option>F</option> 
  </select> 
   
  <input class="my-date" type="date"> 
</div>