无法使Jquery表单元格单击工作

时间:2018-09-28 16:01:11

标签: jquery

在网页上,我有一个HTML选择框和一个DIV样式的框。 HTML选择具有三个值(本周,下周和下周为数字)。当我选择一个星期(例如本周)时,HTML select的OnChange函数启动一个AJAX脚本,该脚本将用PHP创建的表格加载DIV样式的框,该表格又包含来自实际一周的MySQL数据库的摘录。这部分功能很好。但是我无法在该“表”上实现jQuery Cell Click函数。

我尝试过:

// Jquery - reset/clear part..
$("#table").Click()
// {xxx}  --  Does not work

// Jquery - reset/clear part..
$("#table tr td").Click()
// {xxx}  --  Does not work

我尝试了“普通” JavaScript函数。不起作用...

是因为表是动态创建的(通过PHP脚本)-意味着jQuery仅在静态表上起作用-并且我必须做些什么才能使其正常工作?

以下是代码:

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


  <style type="text/css">
    .pos22 {
      position: absolute;
      left: 150px;
      top: 25px;
      width: 100px;
      height: 25px;
      border: 1px solid black;
    }

    .pos1 {
      position: Absolute;
      left: 50px;
      top: 100px;
      width: 140px;
      border: 1px solid red;
    }

    .pos2 {
      position: Absolute;
      left: 190px;
      top: 100px;
      width: 1000px;
      height: 235px;
      border: 1px solid blue;
      overflow: auto;
    }

    TR {
      height: 25px;
    }

    TD {
      height: 25px;
      width: 100px;
      text-align: Center;
      font-family: Verdana;
      font-size: 12px;
    }
  </style>

  <script>
    function showUser(str) {
      if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
      } else {
        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 (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "getuser.php?q=" + str, true);
        xmlhttp.send();
      }
    }
  </script>

</head>

<?php

    $uge = date(W);
    $uge1 = $uge +1;
    $uge2 = $uge +2;

    ?>

  <body>
    <form>
      <select name="users" onchange="showUser(this.value)">
        <option value="">Velg en UGE:</option>
        <option value="<?php echo $uge ?>">Uge
          <?php echo $uge ?>
        </option>
        <option value="<?php echo $uge1 ?>">Uge
          <?php echo $uge1 ?>
        </option>
        <option value="<?php echo $uge2 ?>">Uge
          <?php echo $uge2 ?>
        </option>
      </select>
    </form>
    <br>
    <div id="txtHint" class="pos2"><b>Table data goes here. </b></div>

  </body>

</html>

这是GETUSER.PHP部分:

<!DOCTYPE html>
<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <style class="text/css">
    .scroll {
      position: absolute;
      left: 140px;
      top: 0px;
      width: 800px;
      /* 500px */
      font-family: Verdana;
      font-size: 12px;
      border: 1px solid blue;
      overflow: auto;
    }

    .tab3 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 140px;
      font-family: Verdana;
      font-size: 12px;
      border: 1px solid red;
      overflow: auto;
    }

    table {
      border: 1px solid black;
    }
  </style>

</head>

<body>

  <?php
    $klokke = array("00","01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","00");
    $dage   = array(" ","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lordag","Sondag");

    $q = intval($_GET['q']);

    $year = date(Y);
    $week_no = $q;
    $week_start = new DateTime();

        echo"<div id='result'>11 </div>";  /* test later delete */

        echo "<div class= 'tab3'>";
        echo "<TABLE width='140px;' cellspacing='0' cellpadding='0' border='1'>";
            echo "<TBODY>";
            echo "<TR style='height: 25px;'>";
            echo "<TD width='140px'>&nbsp;</td>";
            echo "</TR>";
            for ($n = 1; $n <= 7; $n++)
            {
                echo "<TR style='height: 25px;'>";
                $week_start->setISODate($year,$week_no,$n);
                echo "<TD width='140px'>".$dage[$n]." ".$week_start->format('d-M')."</td>";
                echo "</TR>";
            }
            echo "</TBODY>";
        echo "</TABLE>";

        echo "</div>";
        echo "<div class='scroll'>";
            echo "<TABLE id='dattab' width='2400px;' cellspacing='0' cellpadding='0' border='1'>";
            echo "<TBODY>";
            echo "<TR style='height: 25px;'>";
            for ($col = 1; $col <= 24; $col++)
            {
                echo "<TD width='120px;'>".$klokke[$col-1].":00-".$klokke[$col].":00</TD>"; 
            }
            echo "</TR>";
            for ($row = 1;$row <= 7; $row++)
            {
                echo "<TR style='height: 25px;'>";
                for ($col = 1; $col <= 24; $col++)
                {
                    echo "<TD width='120px;'>C".$col."R".$row."</TD>";
                }
                echo "</TR>";
            }
            echo "</TBODY>";
            echo "</TABLE>";
        echo "</div>";
    ?>
</body>

</html>

<!--
    /*
     to be inplemented later !

    $ c on = mysqli_connect('localhost','peter','abc123','my_db');
    if (! $ con) {
        die('Could not connect: ' . mysqli_error($con));
    }

    mysqli_select_db($ c on,"ajax_demo");
    $ s q l="SELECT * FROM user WHERE id = '".$q."'";
    $resu lt = mysqli_query($con,$sql);

    echo "<table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Hometown</th>
    <th>Job</th>
    </tr>";
    while($ r ow = mysqli_fetch_array($result)) {
        echo "<tr>";
        echo "<td>" . $row['FirstName'] . "</td>";
        echo "<td>" . $row['LastName'] . "</td>";
        echo "<td>" . $row['Age'] . "</td>";
        echo "<td>" . $row['Hometown'] . "</td>";
        echo "<td>" . $row['Job'] . "</td>";
        echo "</tr>";
    }
    echo "</table>";
    mysqli_close($con);

    */
    -->

1 个答案:

答案 0 :(得分:1)

您可以使用on方法:

$('#txtHint').on('click', 'table td', function() {
    ...
});