javascript - 如何使数据可用于表中的所有行

Question

我的问题是第一行的提取工作正常

<script type="text/javascript">
  $(document).ready(function () {
        $("#tb3").on('input change', function () {

            $('#tb3 > tbody  > tr').each(function () {
                var code = $(this).find('#Product_Code').val();
                //var data = $("#tb3 tr:eq(1)").clone(true).appendTo("#tb3");
                //var code = data.find("Product_Code").val('');


                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url();?>TipUp_Loan/fetch",
                    data: {
                        code: code
                    },
                    datatype: 'json',
                    success: function (data) {


                        var json = data,
                            obj = JSON.parse(json);


                        $("#Product_Name").val(obj.itemname);
                        $("#Rate").val(obj.salrate);
                        //alert(obj);


                    }
                });
            });
        });
    });
</script>

表格代码:

<table>
    <thead>
        <tr>
            <th><a href="javascript:void(0);" id="multi" name="multiplerows" title="Add More Person"></a></th>
            <th>Product Code</th>
            <th>Product Name</th>
            <th>Qty</th>
            <th>Rate</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td><a href='javascript:void(0);' class='remove3'><span class='glyphicon glyphicon-remove'></span></a></td>
            <td>
                <input style="width:80px" type="text" id="Product_Code"  class="form-control input-xs Product_Code "  onkeyup="fetch()"  name="Product_Code[]" required>
            </td>
            <td ><input style="width:300px" type="text" id="Product_Name" class="form-control input-xs" name = "Prdtname[]"   > </td>
            <!--value="<?php echo $row['Product_Name']; ?>"-->
            <td><input style="width:80px" type="text" id="Qty" onkeyup="movetoNext(this, 'addMore3')" class="form-control input-xs"   name="Qty[]" required></td>
            <td><input style="width:100px" type="text" id="Rate"  class="form-control input-xs" value="" name="rate[]" required></td>
            <td><input style="width:150px" type="text" id="Value" class="form-control input-xs" name="amount[]" ></td>
            <th><a href="javascript:void(0);" id="addMore3" name= addmore title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
        </tr>
    </tbody>
</table>

获取代码:

public function fetch()
{   
    $this->load->model('User_model');
    $result = $this->User_model->fetch_name($_POST["code"]);

    echo json_encode($result);
    //echo 'hello'.$code;
}

型号代码:

public function fetch_name($code)
{
    $query = $this->db->query("select * FROM itemmaster where itcode = $code")->row_array();

    return $query;
}

当用户点击 Tab 键时，我试图通过产品代码获取产品详细信息。我必须更改哪些内容才能使表格的所有行都可以获取产品详细信息。提前致谢

Answer 1

您可以像下面一样使用 onchange

<input style="width:80px" type="text" id="Product_Code"  class="form-control input-xs Product_Code " onchange="fetchdetails(this)"  name="Product_Code[]" required>

获取详细信息功能:

function fetchdetails(e) {
     var code = e.value;
           $.ajax({
                type: "POST",
                url: "<?php echo base_url();?>TipUp_Loan/fetch",
                data: {
                    code: code
                },
                datatype: 'json',
                success: function (data) {
                    var json = data,
                        obj = JSON.parse(json);
                    var prodName = $(e).closest('tr').find('#Product_Name');
                    $(prodName).val(obj.itemname);
                    var rate = $(e).closest('tr').find('#Rate');
                    $(rate).val(obj.salrate);
                }
            });
        }

您可以将它用于动态行，它将获取当前行并填充记录。