Форум

lok105 · #1 (**permalink**) 20.01.2015, 13:10

Чет с огромным скрипом поддается мне jquery )))
Есть таблица

<table id="table">
             <tr class = 'table_body'>
                 <td><input class='pole' type='text'/></td>
                 <td><input class='num1' type='text'/></td>
             </tr>
             <tr class = 'table_body'>
                 <td><input class='pole' type='text'/></td>
                 <td><input class='num1' type='text'/></td>
             </tr>
             <tr class = 'table_body'>
                 <td><input class='pole' type='text'/></td>
                 <td><input class='num1' type='text'/></td>
             </tr>
        </table>

и есть скрипт

$(function(){
   $("#table").on("change", ".table_body", function(){
       $(this).find(".pole").each(function(){
            var res = $(".pole").val();
               $('.num1').val(res);            
       });
   });
});

Смысл, что бы что пишешь в input pole отображалось в input num1.
Сейчас срабатывает только изменение в первом <tr> и меняет все input num1

Что я тут ни как понять не могу?
Спасибо!

danik.js · #2 (**permalink**) 20.01.2015, 13:17

Зачем each? Там одно pole всего.

Сообщение от lok105

$(".pole").val()

Это аналог document.querySelector('.pole').value - при этом querySelector вернет первое найденное .pole. То есть нет никакой привязки к конкретной "активной" строке таблицы. Подсказка:

$(this).find(".pole").val()
// или лучше переписать как
$('.pole', this).val()

рони · #3 (**permalink**) 20.01.2015, 13:19

lok105,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function() {
    var pole = $(".pole"),
        num = $(".num1");
    pole.each(function(indx, el) {
        $(el).on("input", function() {
            num[indx].value = el.value
        })
    })
});
  </script>
</head>

<body>
<table id="table">
             <tr class = 'table_body'>
                 <td><input class='pole' type='text'/></td>
                 <td><input class='num1' type='text'/></td>
             </tr>
             <tr class = 'table_body'>
                 <td><input class='pole' type='text'/></td>
                 <td><input class='num1' type='text'/></td>
             </tr>
             <tr class = 'table_body'>
                 <td><input class='pole' type='text'/></td>
                 <td><input class='num1' type='text'/></td>
             </tr>
        </table>

</body>

</html>

lok105 · #4 (**permalink**) 20.01.2015, 14:33

Danik, в этом случае свою ошибку понял.
Но при этом раскладе так же при заполнении pole переписываются все input num1, а не только тот который напротив изменяемого pole. Я это и пытаюсь понять.

$(function(){
   $("#table").on("change", ".table_body", function(){
        var cost = $(this).find(".pole").val();
            $('.num1').val(cost);
   })
})

Рони, я наверное зря упростил скрипт для примера(не специально, просто что бы для себя раз и навсегда объяснить эту систему было понятнее)))).
1.pole заполняется автозаполнением, и первые буквы переносятся, а выбранное слово нет.
2.Скрипт не работает с подгружаемыми динамически.
<tr class = 'table_body'>
<td><input class='pole' type='text'/></td>
<td><input class='num1' type='text'/></td>
</tr>

В основном я себе голову сломал, что если через this обращаться к pole, num1 не является потомком pole, это потомок table_body. и как сделать, что бы изменения касались именно выбранных pole и num1 как их связать?

danik.js · #5 (**permalink**) 20.01.2015, 15:19

Сообщение от lok105

не только тот который напротив изменяемого pole

Я кажется объяснил причину этого, на примере pole. Неужели это так сложно для понимания?

рони · #6 (**permalink**) 20.01.2015, 15:36

Сообщение от lok105

1.pole заполняется автозаполнением, и первые буквы переносятся, а выбранное слово нет.

ничего непонял

Сообщение от lok105

var cost = $(this).find(".pole").val();

тут нашёл

Сообщение от lok105

$('.num1').val(cost);

а тут почему не ищём?

рони · #7 (**permalink**) 20.01.2015, 15:38

Сообщение от danik.js

// или лучше переписать как$('.pole', this).val()

сам так пишу, а шепчут find в этом случае быстрее - скажи что-нибудь?

lok105 · #8 (**permalink**) 20.01.2015, 17:24

$(function(){
	   $("#table").on("change", ".table_body", function(){
	        var cost = $(this).find(".pole").val();
	            $(this).find('.num1').val(cost);
	   })
});

да, так все работает. Просмотрел просто после того как убрал each this num1 находится в поле видимости .table_body
поэтому this и заработал

У меня вопрос был как быть если получение переменной pole происходит внутри функции.

т.е.

$(function(){
	   $("#table").on("change", ".table_body", function(){
	        $(this).find(".pole").autocomplete({
                     change: function(event, ui) {
                              var ID = ui.item.id; // Достаем значение 
                                                        // ключа после автозаполнения 
// Далее json запрос по ключу
                    $.ajax({
        	            url: "js/data.php",
        	            dataType: "json",
        	            type: "GET",
        	            data: {
        	               id: ID

                        },
                        success: function(data){
                        res = data; // Получаем вернувшуюся переменную со
                                        // значением, которое надо записать в num1
// И вот дальше засада...
//Значение переменной res за пределы функции не 
//выходит, а обратится к данному полю num1 внутри функции не получается, 
//распространяется на все num1 
//В этом и был вопрос как эту переменную передать правильно в свой num1
                        
                    $(".table_body").find(".num1").val(res);   // Вот тут засада                   
                       }

                    })
                                                               
                });

	   })
});

Еще раз прошу прощения, что упростил пример, видимо не правильно его упростил, впредь не буду ))

рони · #9 (**permalink**) 20.01.2015, 17:30

lok105,
сохранить this в строке 2
потом использовать в строке 25

lok105 · #10 (**permalink**) 20.01.2015, 17:51

Сорри, не понял про сохранить this в строке 2... куда там эту самую this впихнуть?

Форум

Справочник

Discord чат

Курсы javascript