javascript - 使用 JavaScript 过滤回显表

Question

我需要有关使用 JavaScript 过滤回显表的帮助。我只是使用 a 作为我的表单的复习。看看下面我的代码。

这是我的过滤代码

<div align="center">
        <?php
          // Connect to server and select database.
          mysql_connect("localhost", "root", "") or die(mysql_error());

          mysql_select_db("leavecalendar") or die(mysql_error());
          $i=0;
          $result = mysql_query("SELECT fullname FROM employee");
          $storeArray = Array();
          echo '<label>Filter By Name:</label><select name="fullname" style="width: 200px">';

          while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
              echo "<option >".$row['fullname']."</option>";
          }

          ?>
          </select>
          <!--Filter by Date -->
          <label>Filter By Date:</label>
            <input class="datepicker">
            <a href=""id="refresh">click</a>


      </div>  

这是我的回显表代码

                  <div style="height:70%;">
                  <?php
                      $con=mysqli_connect("localhost","root","","leavecalendar");
                      // Check connection
                      if (mysqli_connect_errno())
                      {
                      echo "Failed to connect to MySQL: " . mysqli_connect_error();
                      }

                      $sql = mysqli_query($con,"SELECT * FROM timekeeping WHERE id='$row[fullname]'");
                      ?>

                      <table width="10%" border="0" cellspacing="1" cellpadding="0" style="width: 897px;">
                    <tr>
                    <td>
                    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"  class="form-table">
                    <tr>
                    <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Full Name</strong></td>
                    <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock In</strong></td>
                    <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock Out</strong></td>

                    <?php
                    while($row = mysqli_fetch_array($sql))
                    {
                    ?>

                    <tr>
                    <td bgcolor="#FFFFFF"><?php echo $row['fullname']; ?></td>
                    <td bgcolor="#FFFFFF"><?php echo $row['actualstart']; ?></td>
                    <td bgcolor="#FFFFFF"><?php echo $row['actualend']; ?></td>

                    </tr>

                    <?php
                    }
                    ?>
                    </table>


                      </td>
                      </tr>
                      </table>
                </div>

总共有 2 个代码仅在 1 个表单下。所以下面是代码摘要供您引用。

<form name="form1" method="post" action="deleteleave.php">  
    <div align="center">
        <?php
          // Connect to server and select database.
          mysql_connect("localhost", "root", "") or die(mysql_error());

          mysql_select_db("leavecalendar") or die(mysql_error());
          $i=0;
          $result = mysql_query("SELECT fullname FROM employee");
          $storeArray = Array();
          echo '<label>Filter By Name:</label><select name="fullname" style="width: 200px">';

          while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
              echo "<option >".$row['fullname']."</option>";
          }

          ?>
          </select>
          <!--Filter by Date -->
          <label>Filter By Date:</label>
            <input class="datepicker">
            <a href=""id="refresh">click</a>


      </div>              
            <div class="gridbody">

              <div style="height:70%;">
                  <?php
                      $con=mysqli_connect("localhost","root","","leavecalendar");
                      // Check connection
                      if (mysqli_connect_errno())
                      {
                      echo "Failed to connect to MySQL: " . mysqli_connect_error();
                      }

                      $sql = mysqli_query($con,"SELECT * FROM timekeeping WHERE id='$row[fullname]'");
                      ?>

                      <table width="10%" border="0" cellspacing="1" cellpadding="0" style="width: 897px;">
                    <tr>
                    <td>
                    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"  class="form-table">
                    <tr>
                    <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Full Name</strong></td>
                    <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock In</strong></td>
                    <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock Out</strong></td>

                    <?php
                    while($row = mysqli_fetch_array($sql))
                    {
                    ?>

                    <tr>
                    <td bgcolor="#FFFFFF"><?php echo $row['fullname']; ?></td>
                    <td bgcolor="#FFFFFF"><?php echo $row['actualstart']; ?></td>
                    <td bgcolor="#FFFFFF"><?php echo $row['actualend']; ?></td>

                    </tr>

                    <?php
                    }
                    ?>
                    </table>


                      </td>
                      </tr>
                      </table>
                </div>
            </div>
            <input name="endorse" type="submit"   id="endorse" value="Endorse Selected Leave/s">

这是我用于刷新页面的 javascript。实际上，我不想刷新整个页面，而是只想刷新表单，以便通过下拉列表或日期选择器显示回显的表过滤器。希望你明白我的意思。

刷新页面的代码。

   <script>
    $(function() {
      $("#refresh").click(function() {
     $("#Container").load()
      })
    })
    </script>

感谢您给出的所有答案。非常感谢。

Answer 1

根据您的代码执行以下操作: 创建一个文件 echoed_table.php 并放入(您的代码):

              <div style="height:70%;">
              <?php
                  $con=mysqli_connect("localhost","root","","leavecalendar");
                  // Check connection
                  if (mysqli_connect_errno())
                  {
                  echo "Failed to connect to MySQL: " . mysqli_connect_error();
                  }

                  $sql = mysqli_query($con,"SELECT * FROM timekeeping WHERE id='$row[fullname]'");
                  ?>
                  <table width="10%" border="0" cellspacing="1" cellpadding="0" style="width: 897px;">
                <tr>
                <td>
                <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"  class="form-table">
                <tr>
                <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Full Name</strong></td>
                <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock In</strong></td>
                <td align="center" bgcolor="#FFFFFF" class="tdclass"><strong>Clock Out</strong></td>

                <?php
                while($row = mysqli_fetch_array($sql))
                {
                ?>

                <tr>
                <td bgcolor="#FFFFFF"><?php echo $row['fullname']; ?></td>
                <td bgcolor="#FFFFFF"><?php echo $row['actualstart']; ?></td>
                <td bgcolor="#FFFFFF"><?php echo $row['actualend']; ?></td>

                </tr>

                <?php
                }
                ?>
                </table>


                  </td>
                  </tr>
                  </table>
            </div>

为了加载/更新表，进行 ajax 调用(可能包括附加(过滤器)url 参数):

$.ajax('echoed_table.php').success(function(data) {
   $('.gridbody').innerHtml(data); // better use an id to identify the container div, instead of the class here
  });