Блог

Главная - Вопросы по программированию - jQuery: как применить функцию размытия к четвертому столбцу каждой строки

jQuery: как применить функцию размытия к четвертому столбцу каждой строки

#jquery

#jquery

Вопрос:

Я новичок в jQuery. Я пытаюсь вызвать функцию размытия в каждой строке четвертого столбца.Например.Я вызвал функцию размытия, используя идентификатор, т.е. «P4_1». Он должен иметь возможность вызывать тот же идентификатор, что и P4_2, P4_3 и так далее.
HTML:

 <table id="myPassTbl">
<tr>
<th>Ink Name</th><th>Issued</th><th>Used</th><th>Return</th>
</tr>
<tr class="row1">
       <td><input type="text" name="ink_name[]" id="P1_1" size="5" /></td>
       <td><input type="text" name="colorno[]" id="P3_1" size="5"/></td>
       <td><input type="text" name="screen[]" id="P4_1" size="5"/></td>
</tr>
<tr class="row2">
        <td><input type="text" name="ink_name[]" id="P1_2" size="5"/></td>
       <td><input type="text" name="colorno[]" id="P3_2" size="5"/></td>
       <td><input type="text" name="screen[]" id="P4_2"size="5"/></td>
</tr>
<tr class="row3">
        <td><input type="text" name="ink_name[]" id="P1_3" size="5"/></td>
       <td><input type="text" name="colorno[]" id="P3_3" size="5"/></td>
       <td><input type="text" name="screen[]" id="P4_3" size="5"/></td>
</tr>

jQuery:

 $(function (){
 $("#P4_1").blur(function(){
       var $P3_1 = $("#P3_1");
          var $P1_1 = $("#P1_1");
       $.ajax({  //Passes value are sent to php and after to database.
          method: "POST",
          url: "xyz.php",
          data: 
          {
            "ink_qty":$P3_1.val(),
            "ink_name":$P1_1.val()
          }
        })

          .done(function( msg ) {
            alert(msg);
           });  
      });
});

xyz.php

 $in_name=$_POST['ink_name'];
$qty1=$_POST['ink_qty'];
echo $in_name."/".$qty1;

Я могу переписать код, но это просто увеличит количество строк кода.Есть ли какой-либо другой вариант.Пожалуйста, предложите мне. Заранее спасибо.

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

1. В вашем примере вам не нужно передавать P2_1 ?

2. Нет. В этом нет необходимости.

3. Ну, зачем редактировать HTML-разметку? Это делает опубликованный ответ более не актуальным… Итак, в вашем реальном случае использования, сколько td у вас есть в строке?

Ответ №1:

Я бы отбросил все идентификаторы и использовал :nth-child() и :eq() , чтобы сделать это так:

(альтернативный подход ниже)

 $(function() {
  $('#myPassTbl td:nth-child(4) input').blur(function() { 
    var $row=$(this).closest('tr'); 
    var ink_name= $row.find('td:eq(0) input').val();
    var ink_qty= $row.find('td:eq(2) input').val();
    var data={
        "ink_qty": ink_name,
        "ink_name": ink_qty
      }
    console.log(data);
    $.ajax({ //Passes value are sent to php and after to database.
      method: "POST",
      url: "xyz.php",
      data: data
    })
    .done(function(msg) {
      alert(msg);
    });
  });
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myPassTbl">
  <tr>
    <th>Ink Name</th>
    <th>Issued</th>
    <th>Used</th>
    <th>Return</th>
  </tr>
  <tr class="row1">
    <td>
      <input type="text" name="ink_name[]" size="5" />
    </td>
    <td>
      <input type="text" name="color[]" size="5" />
    </td>
    <td>
      <input type="text" name="colorno[]" size="5" />
    </td>
    <td>
      <input type="text" name="screen[]" size="5" />
    </td>
  </tr>
  <tr class="row2">
    <td>
      <input type="text" name="ink_name[]" size="5" />
    </td>
    <td>
      <input type="text" name="color[]" size="5" />
    </td>
    <td>
      <input type="text" name="colorno[]" size="5" />
    </td>
    <td>
      <input type="text" name="screen[]" size="5" />
    </td>
  </tr>
  <tr class="row3">
    <td>
      <input type="text" name="ink_name[]" size="5" />
    </td>
    <td>
      <input type="text" name="color[]" size="5" />
    </td>
    <td>
      <input type="text" name="colorno[]" size="5" />
    </td>
    <td>
      <input type="text" name="screen[]" size="5" />
    </td>
  </tr>

Альтернативный метод с использованием классов:

Поскольку вы изменили html, индексы в 1-м методе необходимо будет изменить, или вы могли бы просто использовать такие классы:

 $(function() {
  $('.send-on-blur').blur(function() { 
    var $row=$(this).closest('tr'); 
    var ink_name= $row.find('.ink_name').val();
    var ink_qty= $row.find('.ink_qty').val();
    var data={
        "ink_qty": ink_name,
        "ink_name": ink_qty
      }
    console.log(data);
    $.ajax({ //Passes value are sent to php and after to database.
      method: "POST",
      url: "xyz.php",
      data: data
    })
    .done(function(msg) {
      alert(msg);
    });
  });
}); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myPassTbl">
  <tr>
    <th>Ink Name</th>
    <th>Issued</th>
    <th>Used</th>
    <th>Return</th>
  </tr>
  <tr class="row1">
    <td>
      <input type="text" name="ink_name[]" class="ink_name"  size="5" />
    </td>
    <td>
      <input type="text" name="color[]" class="ink_qty" size="5" />
    </td>
    <td>
      <input type="text" name="colorno[]" class="send-on-blur"  size="5" />
    </td> 
  </tr>
  <tr class="row2">
    <td>
      <input type="text" name="ink_name[]" class="ink_name" size="5" />
    </td>
    <td>
      <input type="text" name="color[]" class="ink_qty" size="5" />
    </td>
    <td>
      <input type="text" name="colorno[]" class="send-on-blur" size="5" />
    </td> 
  </tr>
  <tr class="row3">
    <td>
      <input type="text" name="ink_name[]" class="ink_name" size="5" />
    </td>
    <td>
      <input type="text" name="color[]" class="ink_qty" size="5" />
    </td>
    <td>
      <input type="text" name="colorno[]" class="send-on-blur" size="5" />
    </td> 
  </tr>
  </table>

Ответ №2:

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

Кстати, change вместо этого используйте событие

 $(function() {
  $("#myPassTbl td:nth-child(4)").change(function() {
    var ink_qty = $(this).closest('tr').find('input[name="colorno[]"]').val();
    var ink_name = $(this).closest('tr').find('input[name="ink_name[]"]').val();

    $.ajax({ //Passes value are sent to php and after to database.
      method: "POST",
      url: "xyz.php",
      data: {
        "ink_qty": ink_qty,
        "ink_name": ink_name
      }
    })    
    .done(function(msg) {
      alert(msg);
    });
  });
});

РЕДАКТИРОВАТЬ: после вашего редактирования вам понадобится :nth-child(3) , но это до следующего редактирования… Теперь вы могли бы использовать td:last-child but…

Метки: