close

轉自 http://blog.xuite.net/locktime/blog/45513703

--

方法如下:

<a href="javascript:" onclick="addRow()">新增一列</a>

<a href="javascript:" onclick="delRow()">刪除末列</a>

<table id="tb">

  <tr>

    <th>核取方塊</th><th>文字方塊</th>

  </tr>

</table>

<script>

var num = 1; //設定"列"計數器

var min = 1; //設定表格最少列數

var max = 10; //設定表格最大列數

function addRow(){ //增加一列

  if (num+1 > 10){

    alert("列數最多"+max+"列"); //檢查列數上限

  }else{

    num++;

    var table = document.getElementById("tb"); //取得table object

    var tObj = table.tBodies[0];

    var row = document.createElement("tr"); //產生一列

    var cell = document.createElement("td"); //產生一欄

    cell.innerHTML = "<input type='checkbox' value='1' name='c"+count+"'/>"; //設定欄位內容

    row.appendChild(cell); //將欄位塞進剛剛產生的列中

    cell = document.createElement("td"); //再產生一欄

    cell.innerHTML = "<input type='text' name='t"+count+"'/>"; //設定欄位內容

    row.appendChild(cell); //將欄位塞進剛剛產生的列中

    tObj.appendChild(row); //將列塞進表格中

  }

}

function delRow(){ //刪除末列

  if (num-1 <= 0){

    alert("最少需有"+min+"列");

  }else{

    var table = document.getElementById("tb");

    tableb.deleteRow(tableb.rows.length-1);

    num--;

  }

}

</script>

--

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 dizzy03 的頭像
    dizzy03

    碎碎念

    dizzy03 發表在 痞客邦 留言(0) 人氣()