javascript 增加及刪除table的欄位

請看

噗 因為不知道要講什麼當開頭
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>

這裡可以看範例

本篇發表於 javascript 並標籤為 , 。將永久鏈結加入書籤。

javascript 增加及刪除table的欄位 有 10 則回應

  1. kimozi 說道:

    感謝分享!
    想要請教,可以新增textarea嗎?

  2. hsin 說道:

    新增textarea可以參考這篇http://blog.hsin.tw/2008/javascript-form-input/的作法
    把input改成textarea
    然後改變其他textarea可以用的屬性(像是rows cols這些)
    就可以囉

  3. aska 說道:

    請問 若要根 php 結合 謝入資料庫 該怎樣做?

  4. hsin 說道:

    input的name如果是寫成這樣content[]
    php接收時 $_POST['content']就會是一個array
    看表單有幾個content[] 這個array就有幾個 依序排列
    看是要用for或是foreach去把每個值取出來作處理
    接著就可以作存入資料庫的動作了
    不知道你的問題是不是這個意思?

    php及資料庫的部份 找本書來看看會比較詳細

  5. 說道:

    謝謝~

    那我想問如果想要刪除當前行應該要如何修改

  6. hsin 說道:

    在輸入td的innerHTML裡面
    多加一個刪除按鈕的時候
    就可以直接把刪除的function加進去
    ‘<input type="button" onclick="del(‘+(num-1)+’)" value="刪除">’

    接著再另外加一個del()
    function del(num){
    document.getElementById("mytable").deleteRow(num);
    }

    這樣應該看得懂吧?
    簡單來說就是新增row的時候 就先加進去目前的row數
    刪除的時候就直接拿來用囉

    提醒一點
    row是從0開始算起

  7. 說道:

    謝謝你!~
    想再問說,
    那如果想要

    show出單一筆輸入之後的內容
    和show all所有筆數輸入之後的內容

    那應該如何寫?

  8. hsin 說道:

    ㄟ…
    我看不懂你的問題XD

  9. 小嵐 說道:

    show出目前add裡所輸入的資料

  10. hsin 說道:

    用jqeury的話
    $(‘input[name="name[]"]’).each(function(){
    alert($(this).val());
    });
    會依序alert出來
    應該是這樣
    詳細的用法請再看jquery的文件囉
    如果是純js取的話 我忘記了 ㄎㄎ

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>