Блог

Главная - Вопросы по программированию - Используйте индекс для установки значения в jquery

Используйте индекс для установки значения в jquery

#javascript #jquery #function #indexing

Вопрос:

Не мог бы кто-нибудь, пожалуйста, сказать мне, как я могу использовать индекс в этой ситуации?

У меня есть текстовое поле, которое является моим коэффициентом умножения

 <input type="text" id="value">

И у меня есть таблица, в которой 2 поля расположены в одном и том же tr

Один с фиксированным значением И один, который должен быть результатом умножения этих двух значений.

Пример: На входе я задаю значение = 2

Значение Поля2 = Значение 1 * 2

Значение 1 Значение 2
3 6
4 8

Моя функция jQuery выглядит следующим образом:

  $( "#btn" ).on( "click", function() 
     {
        let vlUS    = $('#value').val()
        
        $("table > tbody  > tr > td > input")
            .each(function (index) {
            
            let vl1   = $('.val1').val()
            let vl2   =  vl1 * vlUS 

            $('.val2').val(vl2)
           
        });
     });

Используя этот способ, присваивает одно и то же значение всем полям «value2»

Как я могу использовать индекс для настройки процесса?

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

1. Можете ли вы также публиковать коды таблиц ?

Ответ №1:

Зацикливайтесь на строках и используйте каждый экземпляр строки для find() конкретных входных данных в этой строке

 $("#btn").on("click", function() {
  let vlUS = $('#value').val();

  $("table > tbody  > tr").each(function(index) {
    const $row = $(this);
    
    let vl1 = $row.find('.val1').val()
    let vl2 = vl1 * vlUS

    $row.find('.val2').val(vl2);

  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">
  Calculate
</button> US: <input id="value" value="5" />

<table>
  <tr>
    <td><input type="text" class="val1" value="3"></td>
    <td><input type="text" class="val2"></td>
  </tr>
  <tr>
    <td><input type="text" class="val1" value="6"></td>
    <td><input type="text" class="val2"></td>
  </tr>
</table>

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

1. все сработало правильно Большое вам спасибо за потраченное время и хорошего дня

Ответ №2:

Рассмотрим следующий код.

 $("#btn").on("click", function() {
  $("table tbody tr").each(function(index, elem) {
    $(".val2", elem).val(parseInt($(".val1", elem).val()) * parseInt($("#value").val()));
  });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">Calculate</button> US: <input id="value" value="5" />
<table>
  <tr>
    <td><input type="text" class="val1" value="3"></td>
    <td><input type="text" class="val2"></td>
  </tr>
  <tr>
    <td><input type="text" class="val1" value="6"></td>
    <td><input type="text" class="val2"></td>
  </tr>
</table>

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

Метки: