使用javascript将a更改为三

时间:2018-09-23 10:52:59

标签: ajax

我创建了一个名为“ attendance_table”的表,该表: 1)通过html显示标题 What the Heading Looks Like通过代码 <table border = '1' name = 'attendance_table' id = 'attendance_table'> <tr name = 'heading' id = 'heading'><th rowspan = '3'>sl</th><th rowspan = '3'>Name</th><th rowspan = '3'>ID</th><th rowspan = '3'>Designation</th><th colspan = '3'>Saturday</th><th colspan = '3'>Sunday</th><th colspan = '3'>Monday</th><th colspan = '3'>Tuesday</th><th colspan = '3'>Wednesday</th><th colspan = '3'>Thursday</th></tr> <?php include "set_days.php"; echo "<tr name = 'heading' id = 'heading'><td align = 'center' colspan = '3'>". $saturday_formal ."</td><td align = 'center' colspan = '3'>". $sunday_formal ."</td><td align = 'center' colspan = '3'>". $monday_formal ."</td><td align = 'center' colspan = '3'>". $tuesday_formal ."</td><td align = 'center' colspan = '3'>". $wednesday_formal ."</td><td align = 'center' colspan = '3'>". $thursday_formal ."</td></tr>"; ?>
<tr name = 'heading' id = 'heading'><td>Login Time</td><td>Logout Time</td><td>Hours Worked</td><td>Login Time</td><td>Logout Time</td><td>Hours Worked</td><td>Login Time</td><td>Logout Time</td><td>Hours Worked</td><td>Login Time</td><td>Logout Time</td><td>Hours Worked</td><td>Login Time</td><td>Logout Time</td><td>Hours Worked</td><td>Login Time</td><td>Logout Time</td><td>Hours Worked</td></tr>

2)仅列出所有人员的姓名,ID和名称,而出勤信息为空白。这是通过html完成的 table with heading and sample list of personnel

<?php
$sl = 1;    
include "connect_to_database.php";
include "convert_hours_to_mins.php";
$create_table = "SELECT userid, firstname, lastname, hvcid, designation 
                       FROM user 
                       WHERE userstatus != 'resigned'
                       AND firstname != 'manager'
                       ORDER BY designation_rank
                       ";
$create_table_result = $conn->query($create_table); 

if($create_table_result->num_rows > 0)
{
    while($row = $create_table_result->fetch_assoc())
    {
        echo "<tr><td>". $sl ."</td><td>". ucfirst($row["firstname"]) . " " . ucfirst($row["lastname"]) ."</td><td>". $row["hvcid"] ."</td><td>". $row["designation"] ."</td><td colspan = '3' id = '". $row["userid"] . $saturday ."'></td><td colspan = '3' id = '". $row["userid"] . $sunday . "'></td><td colspan = '3' id = '". $row["userid"] . $monday ."'></td><td colspan = '3' id = '". $row["userid"] . $tuesday ."'></td><td colspan = '3' id = '". $row["userid"] . $wednesday ."'></td><td colspan = '3' id = '". $row["userid"] . $thursday ."'></td></tr>";
        $sl++;
        $user_id = $row["userid"];
        $td_id = $row["userid"].$saturday;
        echo "<script type='text/javascript'> set_attendance('". $td_id . "', '" . $user_id . "', '" . $saturday ."'); </script>";
        $td_id = $row["userid"].$sunday;
        echo "<script type='text/javascript'> set_attendance('". $td_id . "', '" . $user_id . "', '" . $sunday ."'); </script>";
        $td_id = $row["userid"].$monday;
        echo "<script type='text/javascript'> set_attendance('". $td_id . "', '" . $user_id . "', '" . $monday ."'); </script>";
        $td_id = $row["userid"].$tuesday;
        echo "<script type='text/javascript'> set_attendance('". $td_id . "', '" . $user_id . "', '" . $tuesday ."'); </script>";
        $td_id = $row["userid"].$wednesday;
        echo "<script type='text/javascript'> set_attendance('". $td_id . "', '" . $user_id . "', '" . $wednesday ."'); </script>";
        $td_id = $row["userid"].$thursday;
        echo "<script type='text/javascript'> set_attendance('". $td_id . "', '" . $user_id . "', '" . $thursday ."'); </script>";
    } // end while
} // end if
include "close_connection.php"; 

?>

3)我希望表格使用Ajax(我在w3schools中学到的)填充自身,看起来像这样 ideal result 我已经完成了ideal result usig php中所示的结果,但是问题是它太慢了 4)使用我通过w3schools获得的ajax,我设法做到了 current result通过代码

        function set_attendance(td_id, user_id, date)
    {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
             document.getElementById(td_id).innerHTML = this.responseText;
            }
          };
          xhttp.open('POST','get_attendance.php?user_id= ' + user_id + '&date=' + date,true);
          xhttp.send();
        // document.getElementById(td_id).innerHTML = date;
    } // end function drawChart

如您所见,信息正在更新到正确的单元格,但是我希望程序将当前单元格替换为三个单独的单元格,以便它们与“登录时间”,“注销时间”和“ “工作时间”。但是,当我使用以下代码时:

<?php
$user_id = intval($_GET["user_id"]);
$date = $_GET["date"];

$new_conn = mysqli_connect('localhost','root','','hodavasicommon');
if (!$new_conn) {
    die('Could not connect: ' . mysqli_error($new_conn));
}

$sql = "SELECT logintime, logouttime FROM attendance WHERE userid = '". $user_id ."' AND date = '". $date ."'";
$sql_result = $new_conn->query($sql);

if($sql_result->num_rows > 0)
{
    while($row = $sql_result->fetch_assoc())
    {
        echo "<td>" . $row["logintime"] . "</td><td>" . $row["logouttime"] . "</td>";
    } // end while
} // end if

mysqli_close($new_conn);

?>

我得到了上述结果。任何帮助将不胜感激。

感谢

0 个答案:

没有答案