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);

}