CODEWITHSUNDEEP
phpjavascriptphpmyadmindynamic-tables
roseanne
roseanne

Reputation: 75

How to create a dynamic table like the table in phpmyadmin?

I have the code below which edits the cell value when clicked, however I want the new value to be stored in the database when the user has clicked the save button..please help me

    <?php include"connect.php"; ?>
    <html>
        <head>
            <title>Edit time records</title>    
            <style>
                table{ text-align:justified;}
                a {text-decoration:none;
                   color:black;
                }
                .replace {display:none;}
            </style>
            <link rel="stylesheet" type="text/css" href="css/allRecordsStyle.css">
        <script type="text/javascript">
    /*<![CDATA[*/
    function INPUT(id){
    var obj=document.getElementById(id),tds=obj.getElementsByTagName('SPAN'),z0=0,ip,html;
    for (;z0<tds.length;z0++){
    tds[z0].onmouseup=function(){ AddInput(this); }
    }
    }

    function AddInput(td){
        var ip=zxcAddField('INPUT','text','');
        ip.value=td.innerHTML;
        ip.ondblclick = function () { removeInput(ip); };
        td.innerHTML='';
        td.appendChild(ip);
        td.onmouseup=null;
    }
    function removeInput(input) {
        var val = input.value;
        var td = input.parentNode;
        td.removeChild(td.lastChild);
        td.innerHTML = val;
        td.onmouseup = function () { AddInput(td); };
    }

    function zxcAddField(nn,type,nme){
    var obj;
    try {
    obj=document.createElement('<'+nn+' name="'+(nme||'')+'" '+(type?'type="'+type+'" ':'')+' >');
    }
    catch(error){
    obj=document.createElement(nn);
    if (type){
    obj.type=type;
    }
    obj.name=nme||'';
    }
    return obj;
    }


    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/

    function Init(){
    INPUT('tst');
    }

    if (window.addEventListener){
    window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
    window.attachEvent('onload',Init);
    }

    /*]]>*/
    </script>
        </head>
    <body>
    <a href="admin.php">back</a>
    <?php



      echo "<table border=1 id='tst' class='tab'>";
      echo "<tr><th class='data' rowspan='2' ><strong>EMPLOYEE</strong></th>";
      echo "<th class='data' rowspan='2'>DATE</th>
                <th colspan='2'>AM</th>
                <th colspan='2'>PM</th>
                <th colspan='2'>OVERTIME</th></tr>";
      echo "<tr>
        <th>Arrival</th>
        <th>Departure</th>  
        <th>Arrival</th>
        <th>Departure</th>
        <th>In</th>
        <th>Out</th>
    </tr>";


    $query="SELECT 
    employee_detail.employee_code,
    employee_detail.lname,
    employee_detail.fname,
    employee_detail.mname,
    employee_record.date,
    employee_record.am_in,
    employee_record.am_out,
    employee_record.pm_in,
    employee_record.pm_out,
    employee_record.over_in,
    employee_record.over_out
    FROM employee_detail INNER JOIN employee_record ON         employee_record.employee_code=employee_detail.employee_code ORDER BY id DESC ";

$result=mysql_query($query);
$affected=mysql_affected_rows();

    while($affected>=1&&$row=mysql_fetch_array($result))
    {

      echo '<tr><td>';
      echo $row['lname'].",&nbsp";
      echo $row['fname']."&nbsp";
      echo $row['mname']."</td>"; 
      echo '<td>'.$row['date'].'</td>';
      echo '<td><span name="am_in">'.$row['am_in'].'</span></td>';
      echo '<td><span name="am_out">'.$row['am_out'].'</span></td>';
      echo '<td><span name="pm_in">'.$row['pm_in'].'</span></td>';
      echo '<td><span name="pm_out">'.$row['pm_out'].'</span></td>';
      echo '<td><span name="over_in">'.$row['over_in'].'</span></td>';
      echo '<td><span name="over_out">'.$row['over_out'].'</span></td></tr>';
      $affected--;

    }?>
    <input id="save" type="submit" value="Save Changes" onclick=""/>


    </body>
    </html>

Upvotes: 0

Views: 2243

Answers (1)

adiktofsugar
adiktofsugar

Reputation: 1509

I can't read this. I've been trying for 15 minutes.

To save to the database you need to make an AJAX call to the server, which probably means, in your case, that you will make another php script for that purpose, or divide your script into more than one file...

But you'll end up attaching a click event on this "save button" and then doing the following:

var xhr = makeXmlObject();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4) {
     alert("saved...hopefully...");
  } 
}
xhr.open("POST", "myscript.php", true);
xhr.send("name=cheese");

You also need to set the headers to the form encoding, and make the other script....and make the makeXmlObject function...but this should get you on the right track.

Or you could use a library and most of this gets abstracted for you so you everything isn't so cryptic...which is what I did a while ago and now can't remember how to use the straight up xmlhttprequest object...

Anyway, good luck.

Upvotes: 2

Related Questions