4. 即時新增表單欄位

一、安裝xampp

1.Linux版：http://www.apachefriends.org/zh_tw/xampp-linux.html

(1) 下載並存到家目錄/home/user
(2) 「應用程式→附屬應用程式→終端機」，在終端機中執行以下指令，以管理員身份將xampp-linux-1.7.2.tar.gz解壓縮到/opt
sudo tar xvfz ~/xampp-linux-1.7.2.tar.gz -C /opt
(3) 啟動lampp：「sudo /opt/lampp/lampp start」
(4) 第一次需進行安全設定：sudo /opt/lampp/lampp security（除了第四項「設定MySQL的root密碼」輸入yes以外，其餘的都填no即可）

(5) Linux網頁目錄：「/opt/lampp/htdocs」，可用「sudo chown -R user:user /opt/lampp/htdocs」讓user帳號可以讀取寫入該目錄。

2.Windows版：http://www.apachefriends.org/zh_tw/xampp-windows.html

(1) 下載xampplite-win32-1.7.2.exe，點兩下解壓縮到C:或者D:
(2) 點選xampp-control.exe，並依序啟動Apache和MySQL
(3) 輸入「http://localhost」並選擇「中文→安全」設定MySQL密碼。
(4) Windows網頁目錄：「D:/xampplite/htdocs」

二、即時生出表單

1.HTML部份：<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
    $(document).ready(function(){
        var i=1;
        $('#add').click(function(){
            $('#input').clone().attr('id', 'input'+i).insertBefore('#add_tr');
            i++;
        });
    });
</script>

2.表單部份：
<tr id='input'>
    <td><input type='text' name='name[]' value='' size=10></td>
    <td><input type='text' name='tel[]' value=''></td>
</tr>
<tr id='add_tr'>
    <td>
    <input type='hidden' name='op' value='save'> <input type='submit' value='儲存'>
    <input type='button' id='add' value='新增'>
    </td>
</tr>

3.儲存部份：
function save_tel(){
  global $db_name;
  foreach($_POST['name'] as $i=>$name){
    if(empty($name))continue;
    $sql="insert into `telbook` (`name`,`tel`) values('{$name}','{$_POST['tel'][$i]}')";
    mysql_db_query($db_name,$sql) or die($sql);
  }
}