Question

如何从表格中相对于$（this）获取（或写入）输入字段？

我希望遍历所有输入字段＆＃34; antal＆＃34;并根据＆＃34; antal＆＃34;计算小计。乘以相对于＆＃34; anntal＆＃34;的价格并将计算出的价格存储在相对于＆＃34; antal＆＃34;。

的小计输入字段中

这里有一支完整的笔http://codepen.io/Ktraving/pen/RKRGQG

$("input").change(function(){
    var subtot=0;
    var total=0;

    $("input[name=antal]").each(function(){                                             
       subtot = subtot + (parseInt($(this).val()) * $("input[name=pris]").val());
        $("input[name=subpris]").val(subtot);                                           
    });

    /* Totalling the subtotals */

    $("input[name=subpris]").each(function(){
        total = total + parseInt($(this).val());
    });

    $("input[name=totpris]").val(total);
});

Answer 1

您可以使用closest()转到父级，然后找到名为pris/subpris的相关输入：

$(this).closest('div').find("input[name=pris]").val();

注意： each()无需计算当前输入antal的子总数，我建议使用input代替{{} 1}}当你跟踪该字段时。

希望这有帮助。

change

$(document).ready(function(){
  $("input[name='antal']").on('input', function(){
    var subtot=0;
    var total=0;
    var parent = $(this).closest('.maling_rekke');
    var pris = parent.find("input[name=pris]").val();

    subtot += parseInt($(this).val()) * pris;
    parent.find("input[name=subpris]").val(subtot);

    $("input[name=subpris]").each(function(){				
      total = total + parseInt($(this).val());			
    });

    $("input[name=totpris]").val(total);					
  });
});

/* Overordnet styling */
* 
{
  box-sizing:border-box;
  margin:0vw;
  padding:0vw;
}

fieldset
{
  margin-bottom:20px;
  border-color:red;
  border-width:5px;
  background:#eee;
}

legend
{
  margin-left:15px;
  padding:5px;
  font-size:20px;
  font-weight:bold;
}

/* Overordnet ramme, der på sigt kan benytte flexbox for at gøre formularen responsiv */

.flex_ramme 
{
  width: 500px;
  display: -webkit-flex;
  display: flex;
  flex-direction:column;
  background-color: white;
  margin:30px 30px 30px 30px;
}


/* Styling af formular og felter til formularen */


.maling_rekke
{
  padding:10px 0px 10px 10px;
  clear:both;
}

.maling_felt
{
  padding:5px;
  max-width:80vw;
}

.maling_billede
{
  height:100px;
}

.maling_ramme
{
  float:left;
  min-width:130px;
  max-width:30vw;
  height:200px;
  padding-right:10px;
}




/* Styling af afsluttende knapper */

.knapper
{
  float:right;
}

#knap_nulstil
{
  margin-right:20px;
  background-color: #CC3230; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;	
}

#knap_nulstil:hover
{
  transition: background-color 0.8s ease;
  background-color:#ff3230;	
}


#knap_bestil
{
  background-color: #4CAF50; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#knap_bestil:hover
{
  transition: background-color 0.8s ease;
  background-color: #4CDF50; /* Green */
}

使用jquery计算小计

1 个答案: