JS動態添加表格行

 1.用JS動態添加表格

//全局變量行ID

var trId = 0;

function addRow(){

    //獲得表格

    var tab = document.getElementById("tab");

    //表格行數

    var rowQt = document.getElementById("tab").rows.length;

   

    //新增一行

    var newTr = tab.insertRow(rowQt);

    //給此行設置id屬性,便於管理(刪除) trId: 上面聲明的全局變量默認值 1

    newTr.id = "tr_" + rowQt;

 

    //新增5個單元格

    var newTd1 = newTr.insertCell(0);

    var newTd2 = newTr.insertCell(1);

    var newTd3 = newTr.insertCell(2);

    var newTd4 = newTr.insertCell(3);

    var newTd5 = newTr.insertCell(4);

 

    //爲單元格添加元素

    newTd1.innerHTML = "<b>實例IP</b><input name='instanceList[" + (rowQt - 1) + "].ip' class='reqfield' style='width:150px;'/>";

   

    //構造select組件的options選項集

    var items = "";

    var options = document.getElementById("osType").options;

    for(var i=0; i<options.length; i++){

     items = items + "<option value='" + options[i].value + "'>" + options[i].text + "</option>";

    }

   

    newTd2.innerHTML = "<b>操作系統</b><select name='instanceList[" + (rowQt - 1) + "].osType' class='reqfield' style='width: 60%;' >"

         + items

         + "</select>";

   

   

    newTd3.innerHTML = "<b>登錄帳戶</b><input name='instanceList[" + (rowQt - 1) + "].user' class='reqfield' style='width:150px;'/>";

    newTd4.innerHTML = "<b>登錄密碼</b><input name='instanceList[" + (rowQt - 1) + "].password' class='reqfield' type='password'/>";

    newTd5.innerHTML = "[<a class='deleteRow' href='javascript:deleteCurrentRow(\"" + rowQt + "\")'>刪除</a>]";

   

}

    2.刪除表格一行

function deleteCurrentRow(rowQt){

     //獲得表格

    var tab = document.getElementById("tab");

    //獲取行

    var tr = document.getElementById("tr_" + rowQt);

    //通過行的索引進行刪除

    tab.deleteRow(tr.rowIndex);

}