изменить <td>на три <td>с использованием JavaScript

Question

Я создал таблицу с именем 'visitance_table', которая: 1) показывает заголовки через html Как выглядит заголовок через код <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>"; ?><br> <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) перечисляет имена,идентификаторы и обозначения ТОЛЬКО всего персонала, оставляя информацию о посещаемости незаполненной.это делается с помощью таблицы html с заголовком и образцом списка персонала

<?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) и выглядел следующим образом идеальный результат Я достиг результата, показанного в идеальный результат usig php, но проблема в том, что он слишком медленный 4) Используя какой ajax iзабрал через w3schools, мне удалось сделать так: текущий результат через код

        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);

?>

, я получаю вышеупомянутые результаты.Любая помощь будет принята с благодарностью.

Спасибо