tabl / jquery

index.html

<ul class ="cont">
  <br />
  <li> Потолок площадь : <input type="text" value ="14" name = "s-p"/> <br> 
    <ul class="right">
      <li><p>=> Шпаклевка ( старт + финиш ) работа. Цена от :</p></li>
      <li><input type="text"  value="90" name = "p-sh"/></li>
      <li> => <input type="text" placeholder="Вывод"name = "sh"/></li>
    </ul>
    <ul class="right">
      <li><p>=> Покраска потолка. Цена от :</p></li>
      <li><input type="text"  value="40" name = "p-pok"/></li>
      <li> => <input type="text" placeholder="Вывод" name = "pok"/></li>
    </ul>
    <ul class="right">
      <li><p>=> Материал. Цена от :</p></li>
      <li><input type="text"  value="80" name = "p-mat"/></li>
      <li> => <input type="text" placeholder="Вывод" name = "mat"/></li>
    </ul>
  </li>
  <hr />
  <ul class = "right">
    <li> Общая сумма : <input type="text" placeholder="Вывод" name = "p-all"/></li>
  </ul>
  <br />


  <li>Стены площадь : <input type="text" value ='30' name ="s-st"/> <br>
    <ul class ="right">
      <li><p>=> демонтаж работа. Цена от :</p></li>
      <li><input type="text"  value="45" name ="st-d"/></li>
      <li> => <input type="text" placeholder="Вывод" name = "d"/></li>
    </ul>
    <ul class ="right">
      <li><p>=> Шпаклевка ( старт + финиш ) работа. Цена от :</p></li>
      <li><input type="text"  value="80" name = "st-sh"/></li>
      <li> => <input type="text" placeholder="Вывод" name = "sh-st"/></li>
    </ul>
    <ul class ="right">
      <li><p>=> Поклейка обоев стен. Цена от :</p></li>
      <li><input type="text"  value="45" name = "st-pok"/></li>
      <li> => <input type="text" placeholder="Вывод" name = "pok-st"/></li>
    </ul>
    <ul class ="right">
      <li><p>=> Материал. Цена от :</p></li>
      <li><input type="text"  value="80" name = "st-mat"/></li>
      <li> => <input type="text" placeholder="Вывод" name = "mat-st"/></li>
    </ul>
  </li>
    <hr />
  <ul class = "right">
    <li> Общая сумма : <input type="text" placeholder="Вывод" name = "st-all"/></li>
  </ul>
  <br />
  <br />

</ul>

script.js

$("input:text[name=s-p], input:text[name=p-sh], input:text[name=p-pok], input:text[name=p-mat] ").keyup(function () {
  var potolok = $("input:text[name=s-p]").val(); 
  
  var shpak = $("input:text[name=p-sh]").val();
  var sumShpak = potolok * shpak ;
  $("input:text[name=sh]").val(sumShpak);

  var pok = $("input:text[name=p-pok]").val();
  var sumPok = potolok * pok ;
  $("input:text[name=pok]").val(sumPok);

  var mat = $("input:text[name=p-mat]").val();
  var sumMat = potolok * mat ;
  $("input:text[name=mat]").val(sumMat);

  var pall = sumMat + sumPok + sumShpak;
  $("input:text[name=p-all]").val(pall);
}).keyup();

$("input:text[name=s-st], input:text[name=st-d], input:text[name=st-sh], input:text[name=st-pok],input:text[name=st-mat]").keyup(function () {
  var stena = $("input:text[name=s-st]").val(); 
  
  var dem = $("input:text[name=st-d]").val();
  var sumDem = stena * dem ;
  $("input:text[name=d]").val(sumDem);

  var shapkl = $("input:text[name=st-sh]").val();
  var sumSh = stena * shapkl ;
  $("input:text[name=sh-st]").val(sumSh);

  var pokras = $("input:text[name=st-pok]").val();
  var sumPokras = stena * pokras ;
  $("input:text[name=pok-st]").val(sumPokras);

  var mater = $("input:text[name=st-mat]").val();
  var sumMater = stena * mater ;
  $("input:text[name=mat-st]").val(sumMater);

  var stall = sumMater + sumPokras + sumSh + sumDem ;
  $("input:text[name=st-all]").val(stall);


}).keyup();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

.cont{
  width:600px;
  background: #c5c5c5;
  .right{
    float:right;
  }
}
  ul{
  list-style: none;
  li{
    display: inline-block;
    
    input[type="text"]{
      width:60px;
    }
  }  
}

tabl-jquery.markdown

tabl / jquery

A Pen by Zamay on CodePen.

License.