index.php

15-1 index.php

<?php
$root_pass="";    //資料庫root密碼
$db_name="test"; //資料庫名稱

/* 連資料庫檢查 */
$link=mysql_connect("localhost","root",$root_pass); //資料庫連線
mysql_select_db("test");
mysql_query("SET NAMES 'utf8'"); //設定語系
error_reporting(0);

$sn=$_GET['sn'];

if(!empty($sn)){
$main=add_form($sn);
}else{
$main=list_all();
}

?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel='stylesheet' type='text/css' media='screen' href='style.css' />
<title>點選編輯範例</title>
</head>
<body>
<?php echo $main;?>
</body>
</html>

<?php
//列出所有名單
function list_all(){
$main="<h1>報名列表</h1>
<table id='mytable'>
<tr><th>編號</th><th>姓名</th><th>性別</th><th>備註</th></tr>";
$sql="select * from my_data";
$result=mysql_query($sql) or die($sql);
while(list($sn,$name,$sex,$note)=mysql_fetch_row($result)){
    $main.= "<tr>
    <td><a href='{$_SERVER['PHP_SELF']}?sn=$sn'>$sn</a></td>
    <td><a href='{$_SERVER['PHP_SELF']}?sn=$sn'>$name</a></td>
    <td>$sex</td>
    <td style='white-space:pre-wrap;'>$note</td>
    </tr>";
    $new_sn=$sn;
}
$new_sn++;
$main.="</table>
<p><a href='{$_SERVER['PHP_SELF']}?sn=$new_sn'>新增報名</a></p>";
return $main;
}

//列出單一報名表
function add_form($the_sn=""){
$sql="select * from my_data where sn='$the_sn'";
$result=mysql_query($sql) or die($sql);
list($sn,$name,$sex,$note)=mysql_fetch_row($result);
if(empty($sn)){
        $sql="insert into my_data (sn) values($the_sn)";
        mysql_query($sql);
    }
$main="
<script src='jquery-1.4.2.min.js' type='text/javascript'></script>
    <script src='jquery.jeditable.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    $('.name').editable('save.php', {
        indicator : '<img src=\"indicator.gif\">儲存中...',
        type   : 'text',
        width: '100px',
        height: '30px',
        submitdata:{'sn':$the_sn},
        placeholder : '請點選此處輸入姓名',
        onblur:'submit',
        event: 'dblclick'
        });

    $('.sex').editable('save.php', {
        indicator : '<img src=\"indicator.gif\">儲存中...',
        type   : 'select',
        data   : \" {'男生':'男生' , '女生':'女生'}\",
         submitdata:{'sn':$the_sn},
        placeholder : '請點選此處設定性別',
        onblur:'submit'
        });

    $('.note').editable('save.php', {
        indicator : '<img src=\"indicator.gif\">儲存中...',
        type   : 'textarea',
        cols: 20,
        rows: 5,
        submitdata:{'sn':$the_sn},
        placeholder : '請點選此處輸入您的意見',
        onblur:'submit',
        event: 'mouseover'
        });
    });
    </script>
<h1>點選編輯範例</h1>
<table id='mytable'>
    <tr><th>姓名</th><td><div class='name' id='name'>$name</div></td></tr>
    <tr><th>性別</th><td><div class='sex' id='sex'>$sex</div></td></tr>
    <tr><th>備註</th><td><div class='note' id='note' style='white-space:pre-wrap;'>$note</div></td></tr>
</table>
<p><a href='{$_SERVER['PHP_SELF']}'>回到列表</a></p>
";
return $main;
}
?>