Question

rfq.php

<html>
    <head>
    <script>
    function showUser(str)
    {
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","rfq_list.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body onload=showUser(str="ALL")>

    <div id="main" style="width:1150px;margin:0 auto;padding:10px;">
    <div id="title" style="width:1150px;margin:0 auto;text-align:center;font-size:30px;color:gray;text-shadow:2px 2px #000;font-family:Verdana, Tahoma, sans-serif;"><h3>RFQ LIST</h3></div>
    <div id="container" style="width:1100px;">
    <?php
    $mysqli = new mysqli("localhost", "root", "", "app");
    $result = $mysqli->query("SELECT rfq FROM procurement GROUP BY rfq ORDER BY rfq");

    $option = '';
    while($row = $result->fetch_assoc())
    {
      $option .= '<option value = "'.$row['rfq'].'">'.$row['rfq'].'</option>';
    }
    ?>
    <div style="text-align:center;">
    <select name="users" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">
            <option value="ALL" selected='ALL'>ALL</option>
            <?php echo $option; ?>
    </select>
    </div>
    <br>

    <div id="txtHint">
    </div>
    </div>
    </div>
    </body>
    </html>

rfq_list.php

    <html>
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" href="css/style.css" type="text/css" id="" media="print, projection, screen" />
            <script type="text/javascript" src="javascript/jquery-latest.js"></script>
            <script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
            <script type="text/javascript">
            $(function() {
                $("table").tablesorter({debug: true});
            });
            </script>
    <script type="text/javascript">
        window.onload=function(){
        var tfrow = document.getElementById('tfhover').rows.length;
        var tbRow=[];
        for (var i=1;i<tfrow;i++) {
            tbRow[i]=document.getElementById('tfhover').rows[i];
            tbRow[i].onmouseover = function(){
              this.style.backgroundColor = '#f3f8aa';
            };
            tbRow[i].onmouseout = function() {
              this.style.backgroundColor = '#ffffff';
            };
        }
        };
    </script>
    </head>

    <?php
    $mysqli = new mysqli("localhost", "root", "", "app");
    $q = $_GET["q"];
    $where = '';
    if ( $q != 'ALL' ) {
        $where = " WHERE rfq='$q' ";
    }
    $result1 = $mysqli->query("
        SELECT *,SUM(unit_cost*quantity) AS total_amount 
        FROM procurement 
        $where 
        GROUP BY counter ORDER BY rfq
    ");
    echo'<table id="tfhover" cellspacing="0" class="tablesorter">
            <thead>
            <tr>
                <th title="Item Name">Item Name</th>
                <th title="Item Description">Description</th>
                <th title="Example : Pc, Pcs, Box and Etc.">Unit</th>
                <th title="Item Price">Unit Cost</th>
                <th title="Total Item Quantity">QTY</th>
                <th title="Total Price">Total Amount</th>
            </tr>
            </thead>';
            echo'<tbody>';
    while($row = $result1->fetch_assoc()){
     echo'<tr>
                <td>'.$row['item_name'].'</td>
                <td>'.$row['item_description'].'</td>
                <td>'.$row['unit'].'</td>
                <td>'.number_format($row['unit_cost'], 2, '.', ',').'</td>
                <td>'.$row['quantity'].'</td>
                <td>'.number_format($row['total_amount'], 2, '.', ',').'</td>
           </tr>';
            }
        echo "</tbody></table>";

    if (!$mysqli) {
        die('Connect Error: ' . mysqli_connect_error());
    }
    mysqli_close($mysqli);
        ?> 

    </body>
    </html>

我的问题是这个代码在页面加载时没有执行。但是当我指向rfq_list.php时，下面的脚本会执行。我认为rfq.php XMLHttpRequest中的脚本会影响rfq_list.php中的脚本

rfq_list.php的一部分

<script type="text/javascript" src="javascript/jquery-latest.js"></script>
            <script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
            <script type="text/javascript">
            $(function() {
                $("table").tablesorter({debug: true});
            });
            </script>
    <script type="text/javascript">
        window.onload=function(){
        var tfrow = document.getElementById('tfhover').rows.length;
        var tbRow=[];
        for (var i=1;i<tfrow;i++) {
            tbRow[i]=document.getElementById('tfhover').rows[i];
            tbRow[i].onmouseover = function(){
              this.style.backgroundColor = '#f3f8aa';
            };
            tbRow[i].onmouseout = function() {
              this.style.backgroundColor = '#ffffff';
            };
        }
        };
    </script>

Answer 1

问题是rfq.php中的dom是使用ajax调用动态创建的，因此当执行window.onload时，页面中不存在选项卡table元素导致脚本失败。

解决方案是将脚本转换为使用jQuery和事件委托，ex

jQuery(function ($) {
    $(document).on({
        mouseenter: function () {
            this.style.backgroundColor = '#f3f8aa';
        },
        mouseleave: function () {
            this.style.backgroundColor = '#ffffff';
        }
    }, '#tfhover tr')
})

您的showUser也可以重写为

function showUser(str) {
    var $txtHint = $('#txtHint');
    if (str == "") {
        $txtHint.html('');
        return;
    }
    $txtHint.load('rfq_list.php?q=' + str)
}

为什么我的脚本不执行？

1 个答案: