javascript 增加及刪除table的欄位

2008-12-21

請看

噗 因為不知道要講什麼當開頭
insertRow(數字) 中的數字就是要插入的位置
所以如果這個數字使用-1 就可以插入在最後一個位置
deleteRow(數字) 也是一樣 看要刪除第幾個就填入多少
使用-1就是刪除掉最後一個
這是js新增的部份

function add_new_data() {
 //先取得目前的row數
 var num = document.getElementById("mytable").rows.length;
 //建立新的tr 因為是從0開始算 所以目前的row數剛好為目前要增加的第幾個tr
 var Tr = document.getElementById("mytable").insertRow(num);
 //建立新的td 而Tr.cells.length就是這個tr目前的td數
 Td = Tr.insertCell(Tr.cells.length);
 //而這個就是要填入td中的innerHTML
 Td.innerHTML='<input name="name[]" type="text" size="12">';
 //這裡也可以用不同的變數來辨別不同的td (我是用同一個比較省事XD)
 Td = Tr.insertCell(Tr.cells.length);
 Td.innerHTML='<input name="content[]" type="text" size="12">';
 //這樣就好囉 記得td數目要一樣 不然會亂掉~
}

這是js刪除的部份

function remove_data() {
 //先取得目前的row數
 var num = document.getElementById("mytable").rows.length;
 //防止把標題跟原本的第一個刪除XD
 if(num >2)
 {
  //刪除最後一個
  document.getElementById("mytable").deleteRow(-1);
 }
}

這是html的部份

<!-- 這邊設定table的id 讓javascript用 -->
<table id="mytable" width="580">
  <tr>
    <td width="150" class="td01">名稱</td>
    <td width="200" class="td01">備註</td>
  </tr>
  <tr>
    <td>
    <input name="name[]" type="text" size="12">
    </td>
    <td>
    <input name="content[]" type="text" size="12">
    </td>
  </tr>
</table>

這裡可以看範例

上述連結中範例的 PHP 接收方式,就只是簡單的將收到的值以迴圈印出,如下:

$_count = count($_POST['name']);
if($_count>0){
  for($_i=0;$_i<$_count;$_i++){
    echo 'name['.$_i.'] :'.$_POST['name'][$_i].' , content['.$_i.'] : '.$_POST['content'][$_i].'<br>';
  }
}

Comments

  • hsin 說:

    我已經將 PHP 接收方式新增至文章最後段,就是簡單的以迴圈將收到的值依序列出。
    PHP 迴圈如果不懂的話,請再咕狗或是翻書看看。

  • ckinwing 說:

    你好!不瞞你說其實我是新手的新手,然後最近因為有需要所以做了一個表單,過程中有參考你這篇文章。
    目前我的問題就剩下無法儲存資料。

    我是用 google apps script 寫的,用戶輸入資料之後,會自動建立 google form 然後上傳到我的 google drive 。其他欄位都 ok,可是這個 table 的欄位數目不確定,怎麼儲存?

    這是我的資料表單:https://script.google.com/macros/s/AKfycbyYoyPJlJmJadKLV2ZqVSDnBseuVypf-YliYrcw-OmcRIqbw20K/exec

  • ckinwing 說:

    如果需要的話,我檔案共享給你,然後可以在你的 google 雲端打開。
    我就差儲存這最後一步了,如果能順利解決的話,就真的太謝謝你了!

  • hsin 說:

    我對 google apps script 沒有研究,所以幫不上忙,不好意思。

  • ckinwing 說:

    謝謝!

  • ckinwing 說:

    請教一下,如何讓每次新增的 input name 都不一樣?
    比如:abc1, abc2, abc3……

  • hsin 說:

    利用每次新增時的 row 數( document.getElementById(“mytable”).rows.length ) 或是 tr 的個數( Tr.cells.length ),或是自己額外用一個變數來計算目前個數。這跟此主題不相關,也算是 javascript 的基礎,所以我就不詳述了。

  • 發表迴響

    彙整

    分類