使用鼠标悬停时获取数据

发布于 2025-01-11 09:44:09 字数 8240 浏览 0 评论 0原文

此代码有效,但您需要先选择或单击数据,然后再显示数据。我想要做的是使用鼠标悬停,然后将显示数据,因为输入和显示数据时有类似的数据,所以我认为我应该使用鼠标悬停,这样您就可以看到数据的差异。非常感谢您的帮助

在此处输入图像描述

  <tr class='tr_input'>
        <td><textarea rows="3" type='text' name='sear[]' class='form-control sear' id='sear_1'></textarea></td>
        <td><textarea rows="3" type='text' name='fee[]'  class='form-control fee' id='fee_1' ></textarea></td>
        <td><textarea rows="3" type='text' name='description[]'  class='form-control description' id='description_1' ></textarea></td>
        <td><textarea rows="3" type='text' name='office[]' class='form-control office' id='office_1' ></textarea></td>
        <td><input rows="3" type='text' name='amount[]'  class='form-control amount payment' id='amount_1' ></td>
        <td><input rows="3" type="text" id='fpay0' name='quantity[]' class="form-control qty payment" autocomplete="off"/></td>
        <td><input type="text" class="form-control numeric_value0 subtotals" name="subtotal[]" id='subtotal_1' autocomplete="off"/></td>
   </tr>
    <script type="text/javascript">
        $(document).ready(function(){

            $(document).on('keydown', '.sear', function() {
                
                var id = this.id;
                var splitid = id.split('_');
                var index = splitid[1];

                $( '#'+id ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "getDetails.php",
                            type: 'post',
                            dataType: "json",
                            data: {
                                search: request.term,request:1
                            },
                            success: function( data ) {
                                response( data );
                            }
                        });
                    },
                    select: function (event, ui) {
                        $(this).val(ui.item.label); // display the selected text
                        var userid = ui.item.value; // selected id to input

                        // AJAX
                        $.ajax({
                            url: 'getDetails.php',
                            type: 'post',
                            data: {userid:userid,request:2},
                            dataType: 'json',
                            success:function(response){
                                
                                var len = response.length;

                                if(len > 0){
                                    var id = response[0]['id'];
                                    var fee = response[0]['fee'];
                                    var description = response[0]['description'];
                                    var office = response[0]['office'];
                                    var amount = response[0]['amount'];
                                    var qty = response[0]['qty'];
                                    var subtotal = response[0]['subtotal'];

                                    document.getElementById('fee_'+index).value = fee;
                                    document.getElementById('description_'+index).value = description;
                                    document.getElementById('office_'+index).value = office;
                                    document.getElementById('amount_'+index).value = amount;
                                    
                                }
                                
                            }
                        });

                        return false;
                    }
                });
            });
            
            // Add more
            
            var index = 2;
         
            $('#addmore').click(function(){
                // Get last id 
                var lastarp_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
                var split_id = lastarp_id.split('_');

                // New index
                var index = Number(split_id[1]) + 1;

                // Create row with input elements
                var html = "<tr class='tr_input'><td><textarea rows='3' type='text' name='sear[]' class='form-control sear' id='sear_"+index+"'></textarea></td><td><textarea rows='3' type='text' name='fee[]' class='form-control fee' id='fee_"+index+"' ></textarea></td><td><textarea rows='3' type='text' name='description[]' class='form-control description' id='description_"+index+"' ></textarea></td><td><textarea rows='3' type='text' class='form-control office' id='office_"+index+"' ></textarea></td><td><input rows='3' type='text' name='amount[]' class='form-control input-md amount paym' id='amount_"+index+"' ></td><td><input type='text' name='quantity[]' class='form-control qty paym' id='quantity_"+index+"' ></td><td><input type='text' class='form-control subtotals numeric_value' name='subtotal[]' id='subtotal_"+index+"' ></td></tr>";

                // Append data
                $('tbody').append(html);
                
                $('.paym').keyup(function() {
                    var ids = $(this).attr("id").split("_");
                    // alert(ids[1]);
                    var sum = 0;
                    var f = $('#amount_'+ids[1]).val();
                    var p = $('#quantity_'+ids[1]).val(); 
                    
                    sum = Number(f) * Number(p);
                    $('#subtotal_'+ids[1]).val(sum.toFixed(2));
                    var sums = 0;
                    $('.subtotals').each(function() {
                        
                         sums += Number($(this).val());

                    });
                    sums = sums;
                    $('#total').val(sums.toFixed(2));
                    $('#tes').val(combines($('#total').val()));
                });
                index=index+1;;
            });
            
            $( "#delete" ).click(function() {
                var rowCount = $('#tab_logic tr').length;
                var del = rowCount - 2;
                var ind = del-1;
                if(del==2){
                }else{
                    $("#tab_logic tr:eq("+ind+")").remove();
                    del=del-1;
                    var sums = 0;
                    $('.subtotals').each(function() {
                        
                         sums += Number($(this).val());

                    });
                    sums = sums;
                    $('#total').val(sums.toFixed(2));
                    $('#tes').val(combines($('#total').val()));
                }
            });
            //end
            //start
            $('.numeric_value').keyup(function() {
                var sum = 0;
                $('.numeric_value').each(function() {
                    
                     sum += Number($(this).val());

                });
                sums = sums;
                $('#total').val(sum.toFixed(2));
                $('#tes').val(combines($('#total').val()));
            });
            
            
            $('.payment').keyup(function() {
                var sum = 0;
                    var f = $('#fpay0').val();
                    var p = $('#amount_1').val(); 
                    
                    sum = Number(f) * Number(p);
                    $('.numeric_value0').val(sum.toFixed(2));
                    var sums = 0;
                    $('.subtotals').each(function() {
                        
                         sums += Number($(this).val());

                    });
                    sums = sums;
                    $('#total').val(sums.toFixed(2));
                    $('#tes').val(combines($('#total').val()));
                
            });
            
            //endold
        })
    </script>

this code works but you need to select or click the data first before displaying the data. What i want to do is to use mouse hover and data will display because there are similar data upon entering and displaying the data so i think i should use mouse hover so you can see the difference of the data. Your help is much appreciated

enter image description here

  <tr class='tr_input'>
        <td><textarea rows="3" type='text' name='sear[]' class='form-control sear' id='sear_1'></textarea></td>
        <td><textarea rows="3" type='text' name='fee[]'  class='form-control fee' id='fee_1' ></textarea></td>
        <td><textarea rows="3" type='text' name='description[]'  class='form-control description' id='description_1' ></textarea></td>
        <td><textarea rows="3" type='text' name='office[]' class='form-control office' id='office_1' ></textarea></td>
        <td><input rows="3" type='text' name='amount[]'  class='form-control amount payment' id='amount_1' ></td>
        <td><input rows="3" type="text" id='fpay0' name='quantity[]' class="form-control qty payment" autocomplete="off"/></td>
        <td><input type="text" class="form-control numeric_value0 subtotals" name="subtotal[]" id='subtotal_1' autocomplete="off"/></td>
   </tr>
    <script type="text/javascript">
        $(document).ready(function(){

            $(document).on('keydown', '.sear', function() {
                
                var id = this.id;
                var splitid = id.split('_');
                var index = splitid[1];

                $( '#'+id ).autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "getDetails.php",
                            type: 'post',
                            dataType: "json",
                            data: {
                                search: request.term,request:1
                            },
                            success: function( data ) {
                                response( data );
                            }
                        });
                    },
                    select: function (event, ui) {
                        $(this).val(ui.item.label); // display the selected text
                        var userid = ui.item.value; // selected id to input

                        // AJAX
                        $.ajax({
                            url: 'getDetails.php',
                            type: 'post',
                            data: {userid:userid,request:2},
                            dataType: 'json',
                            success:function(response){
                                
                                var len = response.length;

                                if(len > 0){
                                    var id = response[0]['id'];
                                    var fee = response[0]['fee'];
                                    var description = response[0]['description'];
                                    var office = response[0]['office'];
                                    var amount = response[0]['amount'];
                                    var qty = response[0]['qty'];
                                    var subtotal = response[0]['subtotal'];

                                    document.getElementById('fee_'+index).value = fee;
                                    document.getElementById('description_'+index).value = description;
                                    document.getElementById('office_'+index).value = office;
                                    document.getElementById('amount_'+index).value = amount;
                                    
                                }
                                
                            }
                        });

                        return false;
                    }
                });
            });
            
            // Add more
            
            var index = 2;
         
            $('#addmore').click(function(){
                // Get last id 
                var lastarp_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
                var split_id = lastarp_id.split('_');

                // New index
                var index = Number(split_id[1]) + 1;

                // Create row with input elements
                var html = "<tr class='tr_input'><td><textarea rows='3' type='text' name='sear[]' class='form-control sear' id='sear_"+index+"'></textarea></td><td><textarea rows='3' type='text' name='fee[]' class='form-control fee' id='fee_"+index+"' ></textarea></td><td><textarea rows='3' type='text' name='description[]' class='form-control description' id='description_"+index+"' ></textarea></td><td><textarea rows='3' type='text' class='form-control office' id='office_"+index+"' ></textarea></td><td><input rows='3' type='text' name='amount[]' class='form-control input-md amount paym' id='amount_"+index+"' ></td><td><input type='text' name='quantity[]' class='form-control qty paym' id='quantity_"+index+"' ></td><td><input type='text' class='form-control subtotals numeric_value' name='subtotal[]' id='subtotal_"+index+"' ></td></tr>";

                // Append data
                $('tbody').append(html);
                
                $('.paym').keyup(function() {
                    var ids = $(this).attr("id").split("_");
                    // alert(ids[1]);
                    var sum = 0;
                    var f = $('#amount_'+ids[1]).val();
                    var p = $('#quantity_'+ids[1]).val(); 
                    
                    sum = Number(f) * Number(p);
                    $('#subtotal_'+ids[1]).val(sum.toFixed(2));
                    var sums = 0;
                    $('.subtotals').each(function() {
                        
                         sums += Number($(this).val());

                    });
                    sums = sums;
                    $('#total').val(sums.toFixed(2));
                    $('#tes').val(combines($('#total').val()));
                });
                index=index+1;;
            });
            
            $( "#delete" ).click(function() {
                var rowCount = $('#tab_logic tr').length;
                var del = rowCount - 2;
                var ind = del-1;
                if(del==2){
                }else{
                    $("#tab_logic tr:eq("+ind+")").remove();
                    del=del-1;
                    var sums = 0;
                    $('.subtotals').each(function() {
                        
                         sums += Number($(this).val());

                    });
                    sums = sums;
                    $('#total').val(sums.toFixed(2));
                    $('#tes').val(combines($('#total').val()));
                }
            });
            //end
            //start
            $('.numeric_value').keyup(function() {
                var sum = 0;
                $('.numeric_value').each(function() {
                    
                     sum += Number($(this).val());

                });
                sums = sums;
                $('#total').val(sum.toFixed(2));
                $('#tes').val(combines($('#total').val()));
            });
            
            
            $('.payment').keyup(function() {
                var sum = 0;
                    var f = $('#fpay0').val();
                    var p = $('#amount_1').val(); 
                    
                    sum = Number(f) * Number(p);
                    $('.numeric_value0').val(sum.toFixed(2));
                    var sums = 0;
                    $('.subtotals').each(function() {
                        
                         sums += Number($(this).val());

                    });
                    sums = sums;
                    $('#total').val(sums.toFixed(2));
                    $('#tes').val(combines($('#total').val()));
                
            });
            
            //endold
        })
    </script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

幻想少年梦 2025-01-18 09:44:09

我无法发表评论(需要 50 声望),所以我发送了一个答案。

尝试鼠标悬停事件,替换点击。

就像那里:

document.getElementById("some").addEventListener("mouseenter", function( event ) {
    // todo something
}, false);

I can't comment(need 50 reputation), so I send a answer.

Try mouseover event, in replace click.

like there:

document.getElementById("some").addEventListener("mouseenter", function( event ) {
    // todo something
}, false);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文