線上書籍

Home

[991]PHP網站開發 進階應用技巧2

<?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;
}
?>