Question

我是jQuery的新手。我试图在第四列的每一行调用模糊函数。对于Eg.I使用id调用模糊函数，即P4_1＆＃39;。它应该可以调用相同的ID，如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;

我可以重写代码，但它只会增加代码行。还有其他选项。请建议我。提前谢谢。

Answer 1

我会抛弃所有ID并使用First Line : My Name Is Johnty Second Line : and i am eating an Third Line : Nut和:nth-child()这样做：

（下面的替代方法）

＆＃13;

:eq()

＆＃13;

$(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);
    });
  });
});

＆＃13;

使用类的替代方法：

由于您更改了html，因此需要更改1st方法中的索引，或者您可以使用这样的类：

＆＃13;

<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>

＆＃13;

$(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);
    });
  });
});

＆＃13;

Answer 2

您可以重构代码以定位所有第4列输入并使用以下方法获取相关输入值：

BTW，请改为使用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但是......

jQuery：如何将模糊函数应用于每行的第四列

2 个答案:

使用类的替代方法：