Взять сумму столбцов входного текстового поля на основе выбранного значения выпадающего списка

#javascript #html #jquery #html-table #css-selectors

#javascript #HTML #jquery #html-таблица #css-селекторы

Вопрос:

Я новичок в Jquery. Нужна ваша помощь в решении приведенной ниже проблемы. У меня есть html-таблица с 3 столбцами и 3 строками. Каждый столбец имеет заголовок, пример col1, col2 и col3. Существует статус утверждения столбца со значениями — Утверждено, ожидается утверждение и не утверждено. Я должен взять сумму значений, введенных пользователем в каждом текстовом поле для каждого столбца. В настоящее время в моем коде я беру эту сумму для каждого столбца. Но я хочу взять сумму только тогда, когда статус утверждения «Утвержден». Я не уверен, какой обработчик событий использовать, поскольку пользователь может либо сначала ввести номер, либо статус утверждения в случайном порядке. Спасибо!

 <html&&t;
<head&&t;
<script src="https://ajax.&oo&leapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&&t;</script&&t;
<style&&t;
input {display: block;}
input.total {mar&in-top: 30px;}
[class*="total"] {
  back&round: #ffff00;
  p.double {border-style: double;}
}
.none{
display:none;
}
</style&&t;
</head&&t;
<body&&t;
<table class="aa"&&t;
<th&&t; Approval status</th&&t;
<th&&t;col1</th&&t;
<th&&t;col2</th&&t;
<th&&t;col3</th&&t;
<tr&&t;
<td id="selectBox1"&&t;
<select id = "myList1"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
</tr&&t;
<tr&&t;
<td id="selectBox2"&&t;
<select id = "myList2"&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
<td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t;  <input type="text" class="none" value="" /&&t;</td&&t;
<td&&t;  <input type="text" class="total1" value="" /&&t; </td&&t;
<td&&t;  <input type="text" class="total2" value="" /&&t; </td&&t;
<td&&t;  <input type="text" class="total3" value="" /&&t; </td&&t;
 </tr&&t;
</table&&t;
<script&&t;
$(document).on("chan&e", ".qty1", function() {
    var sum = 0;
    $(".qty1").each(function(){
        sum  =  $(this).val();
    });
    $(".total1").val("total:"   sum);
});
$(document).on("chan&e", ".qty2", function() {
    var sum = 0;
    $(".qty2").each(function(){
        sum  =  $(this).val();
    });
    $(".total2").val("total:"   sum);
});
$(document).on("chan&e", ".qty3", function() {
    var sum = 0;
    $(".qty3").each(function(){
        sum  =  $(this).val();
    });
    $(".total3").val("total:"   sum);
});
</script&&t;

</body&&t;
</html&&t;  

Комментарии:

1. Почему вы используете #selectBox и #myList несколько раз? ИДЕНТИФИКАТОР должен быть уникальным

2. Кажется более логичным иметь только 1 элемент выбора «Статус утверждения». Пожалуйста, поясните, почему их 3. Если их должно быть 3, когда их следует суммировать? Когда все 3 будут одобрены?

3. проверьте мой ответ, надеюсь, вы найдете его полезным

4. @Rob Moll: я отредактировал код. извините за путаницу. Последний выпадающий список был дополнительным. Для каждой строки, в которой пользователь вводит текстовое поле, будет выпадающий список, и пользователь выберет, одобрено это или нет. Затем мне нужно показать сумму в последнем поле только для текстового поля, которое имеет статус утвержденного. Спасибо!

Ответ №1:

У вас слишком много кода в вашем фрагменте. Уменьшив его, вы можете сделать его пригодным для повторного использования. Кроме того, вам действительно не нужны все эти id и class -атрибуты для управления вашим скриптом.

Следующий скрипт может быть применен к таблице любого размера.

 $("table.aa").on("chan&e input",ev=&&t;            // act on both: "chan&e" and "input"
  $("table.aa tr:last td:&t(0)").each((i,td)=&&t;  // &o over each result input field
    $('input',td).val(                          // and set its value to:
      $("table.aa tr")                          // find all rows ...
       .filter((j,tr)=&&t;$("select",tr).val()==2) // but only those havin& a select==2
       .find("input:eq(" i ")").toArray()       // take i-th input in each row
       .reduce((a,c)=&&t; c.value a,0)             // and accumulate all values
    ) 
  )
)  
 input {display: block;}
.total {
  back&round: #ffff00;
  p.double {border-style: double;}
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table class="aa"&&t;
<th&&t; Approval status</th&&t;
<th&&t;col1</th&&t;
<th&&t;col2</th&&t;
<th&&t;col3</th&&t;
<tr&&t;
<td&&t;
<select&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t;
<select&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t;
<select&&t;
<option value = "1"&&t;Choose Approval Status</option&&t;
<option value = "2"&&t;Approved</option&&t;
<option value = "3"&&t;Approval Pendin&</option&&t;
<option value = "4"&&t;Not Approved</option&&t;
</select&&t;
</td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
<td&&t; <input type="text"/&&t; </td&&t;
</tr&&t;
<tr&&t;
<td&&t;  </td&&t;
<td&&t;  <input type="text" class="total" value="" /&&t; </td&&t;
<td&&t;  <input type="text" class="total" value="" /&&t; </td&&t;
<td&&t;  <input type="text" class="total" value="" /&&t; </td&&t;
 </tr&&t;
</table&&t;  

Комментарии:

1. Большое вам спасибо за помощь. Это работает именно так, как необходимо. Ваш ответ был очень полезен.

2. Да, это хорошая особенность jQuery: вы почти всегда знаете, когда находитесь на правильном пути, потому что тогда вы «меньше пишете, больше делаете». 😉

Ответ №2:

Просто замените значения выбора из number на тот же текст, что и в innerHTML и используйте оператор if like if($('#myList1').val() == 'Approved') , чтобы сумма вычислялась, только если оператор if имеет значение true

 $(document).on('chan&e', '.qty1', () =&&t; {
  if ($('#myList1').val() == 'Approved') {
    var sum = 0;
    $(".qty1").each(function() {
      sum  =  $(this).val();
    });
    $(".total1").val("total:"   sum);
  }
});
$(document).on('chan&e', '.qty2', () =&&t; {
  if ($('#myList2').val() == 'Approved') {
    var sum = 0;
    $(".qty2").each(function() {
      sum  =  $(this).val();
    });
    $(".total2").val("total:"   sum);
  }
});
$(document).on('chan&e', '.qty3', () =&&t; {
  if ($('#myList3').val() == 'Approved') {
    var sum = 0;
    $(".qty3").each(function() {
      sum  =  $(this).val();
    });
    $(".total3").val("total:"   sum);
  }
});  
 input {
  display: block;
}

input.total {
  mar&in-top: 30px;
}

[class*="total"] {
  back&round: #ffff00;
  p.double {
    border-style: double;
  }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&&t;</script&&t;
<table class="aa"&&t;
  <th&&t; Approval status</th&&t;
  <th&&t;col1</th&&t;
  <th&&t;col2</th&&t;
  <th&&t;col3</th&&t;
  <tr&&t;
    <td id="selectBox"&&t;
      <select id="myList1"&&t;
        <option value="none" selected&&t;Choose Approval Status</option&&t;
        <option value="Approved"&&t;Approved</option&&t;
        <option value="Approval Pendin&"&&t;Approval Pendin&</option&&t;
        <option value="Not Approved"&&t;Not Approved</option&&t;
      </select&&t;
    </td&&t;
    <td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
    <td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
    <td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
  </tr&&t;
  <tr&&t;
    <td id="selectBox"&&t;
      <select id="myList2"&&t;
        <option value="none"&&t;Choose Approval Status</option&&t;
        <option value="Approved"&&t;Approved</option&&t;
        <option value="Approval Pendin&"&&t;Approval Pendin&</option&&t;
        <option value="Not Pendin&"&&t;Not Approved</option&&t;
      </select&&t;
    </td&&t;
    <td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
    <td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
    <td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
  </tr&&t;
  <tr&&t;
    <td id="selectBox"&&t;
      <select id="myList3"&&t;
        <option value="none"&&t;Choose Approval Status</option&&t;
        <option value="Approved"&&t;Approved</option&&t;
        <option value="Approval Pendin&"&&t;Approval Pendin&</option&&t;
        <option value="Not Pendin&"&&t;Not Approved</option&&t;
      </select&&t;
    </td&&t;
    <td&&t; <input type="text" class="total1" value="" /&&t; </td&&t;
    <td&&t; <input type="text" class="total2" value="" /&&t; </td&&t;
    <td&&t; <input type="text" class="total3" value="" /&&t; </td&&t;
  </tr&&t;
</table&&t;  

Комментарии:

1. Спасибо за ответ. Код работает не так, как ожидалось; он принимает сумму для всех, независимо от выбранного статуса, а не только для утвержденных.

Ответ №3:

Вот одно из решений для вашего требования, оно выведет сумму значений на основе статуса каждой строки с помощью изменения значения выпадающего списка final row.

 $(".finalState").on("chan&e", function() {
            if($(this).val() == 2) {
              var t1 = t2 = t3 = 0;
              var tTR = $(this).parents("tbody").find("tr");
              tTR.each(function(){
                if(!$(this).hasClass("total-row") amp;amp; $(this).find(".myList").val()==2){
                  var qty1 = $(this).find(".qty1").val();
                  if(!isNaN(qty1) amp;amp; qty1 !== null amp;amp; qty1 !== '' ){
                    t1 = (parseFloat(t1)   parseFloat($(this).find(".qty1").val()));
                  }
                  
                  var qty2 = $(this).find(".qty2").val();
                  if(!isNaN(qty2) amp;amp; qty2 !== null amp;amp; qty2 !== '' ){
                    t2 = (parseFloat(t2)   parseFloat($(this).find(".qty2").val()));
                  }
                  
                  var qty3 = $(this).find(".qty3").val();
                  if(!isNaN(qty3) amp;amp; qty3 !== null amp;amp; qty3 !== '' ){
                    t3 = (parseFloat(t3)   parseFloat($(this).find(".qty3").val()));
                  }
                }
              });
            } else if($(this).val() == 3) {
              var t1 = t2 = t3 = 0;
              var tTR = $(this).parents("tbody").find("tr");
              tTR.each(function(){
                if(!$(this).hasClass("total-row") amp;amp; $(this).find(".myList").val()==3){
                  var qty1 = $(this).find(".qty1").val();
                  if(!isNaN(qty1) amp;amp; qty1 !== null amp;amp; qty1 !== '' ){
                    t1 = (parseFloat(t1)   parseFloat($(this).find(".qty1").val()));
                  }
                  
                  var qty2 = $(this).find(".qty2").val();
                  if(!isNaN(qty2) amp;amp; qty2 !== null amp;amp; qty2 !== '' ){
                    t2 = (parseFloat(t2)   parseFloat($(this).find(".qty2").val()));
                  }
                  
                  var qty3 = $(this).find(".qty3").val();
                  if(!isNaN(qty3) amp;amp; qty3 !== null amp;amp; qty3 !== '' ){
                    t3 = (parseFloat(t3)   parseFloat($(this).find(".qty3").val()));
                  }
                }
              });
            } else if($(this).val() == 4){
              var t1 = t2 = t3 = 0;
              var tTR = $(this).parents("tbody").find("tr");
              tTR.each(function(){
                if(!$(this).hasClass("total-row") amp;amp; $(this).find(".myList").val()==4){
                  var qty1 = $(this).find(".qty1").val();
                  if(!isNaN(qty1) amp;amp; qty1 !== null amp;amp; qty1 !== '' ){
                    t1 = (parseFloat(t1)   parseFloat($(this).find(".qty1").val()));
                  }
                  
                  var qty2 = $(this).find(".qty2").val();
                  if(!isNaN(qty2) amp;amp; qty2 !== null amp;amp; qty2 !== '' ){
                    t2 = (parseFloat(t2)   parseFloat($(this).find(".qty2").val()));
                  }
                  
                  var qty3 = $(this).find(".qty3").val();
                  if(!isNaN(qty3) amp;amp; qty3 !== null amp;amp; qty3 !== '' ){
                    t3 = (parseFloat(t3)   parseFloat($(this).find(".qty3").val()));
                  }
                }
              });
            }
            $(".total1").val(t1);
            $(".total2").val(t2);
            $(".total3").val(t3);
        });  
 input {display: block;}
        input.total {mar&in-top: 30px;}
        [class*="total"] {
        back&round: #ffff00;
        p.double {border-style: double;}
        }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&&t;</script&&t;
<html&&t;
    <head&&t;
    </head&&t;
    <body&&t;
    <table class="aa"&&t;
      <thead&&t;
        <tr&&t;
            <th&&t;col1</th&&t;
            <th&&t;col2</th&&t;
            <th&&t;col3</th&&t;
            <th&&t;Approval status</th&&t;
        </tr&&t;
      </thead&&t;
      <tbody&&t;
        <tr&&t;
            <td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
            <td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
            <td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
            <td class="selectBox"&&t;
                <select class= "myList"&&t;
                    <option value = "1"&&t;Choose Approval Status</option&&t;
                    <option value = "2"&&t;Approved</option&&t;
                    <option value = "3"&&t;Approval Pendin&</option&&t;
                    <option value = "4"&&t;Not Approved</option&&t;
                </select&&t;
            </td&&t;
        </tr&&t;
        <tr&&t;
            <td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
            <td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
            <td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
            <td class="selectBox"&&t;
                <select class="myList"&&t;
                    <option value = "1"&&t;Choose Approval Status</option&&t;
                    <option value = "2"&&t;Approved</option&&t;
                    <option value = "3"&&t;Approval Pendin&</option&&t;
                    <option value = "4"&&t;Not Approved</option&&t;
                </select&&t;
            </td&&t;
        </tr&&t;
        <tr&&t;
            <td&&t; <input type="text" class="qty1" value="" /&&t; </td&&t;
            <td&&t; <input type="text" class="qty2" value="" /&&t; </td&&t;
            <td&&t; <input type="text" class="qty3" value="" /&&t; </td&&t;
            <td class="selectBox"&&t;
                <select class="myList"&&t;
                    <option value = "1"&&t;Choose Approval Status</option&&t;
                    <option value = "2"&&t;Approved</option&&t;
                    <option value = "3"&&t;Approval Pendin&</option&&t;
                    <option value = "4"&&t;Not Approved</option&&t;
                </select&&t;
            </td&&t;
        </tr&&t;
        <tr class="total-row"&&t;
            <td&&t;  <input type="text" class="total1" value="" /&&t; </td&&t;
            <td&&t;  <input type="text" class="total2" value="" /&&t; </td&&t;
            <td&&t;  <input type="text" class="total3" value="" /&&t; </td&&t;
            <td class="selectBox"&&t;
                <select class = "myList finalState"&&t;
                    <option value = "1"&&t;Choose Approval Status</option&&t;
                    <option value = "2"&&t;Approved</option&&t;
                    <option value = "3"&&t;Approval Pendin&</option&&t;
                    <option value = "4"&&t;Not Approved</option&&t;
                </select&&t;
            </td&&t;
        </tr&&t;
      </tbody&&t;
    </table&&t;
    </body&&t;
</html&&t;