使用js實現表格的添加和刪除

1.html界面中代碼實現如下

<div>
    <label for="showLastPage">數據表設置</label></br>
    <p size="30">
        <label style="padding-right:30px;"></label>
        {{ form.sqlLan.label }}
        {{ form.sqlLan }}
        <input type="button" style="position:absolute;left:880px;top:45px;" id="addUsers" value="確定" οnclick="btnAdd()"></input>
    </p>
</div></br>
<div>
    <table id="usertable"  width="100%" border="1" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <center><th  width="20%;" class='onecenter'>Sql語句數值</th></center>
                <center><th  width="75%;" class='onecenter'>Sql內容</th></center>
                <center><th  width="5%;" class='onecenter'>  </th></center>
            </tr>
        </tbody>
    </table>
</div></br>

2.表格中添加一行，和刪除一行的功能實現

<script charset="utf-8" type="text/javascript">
var iNum=0;
function btnAdd(){
    iNum++;
    var str='Sql'+iNum;
    var selectField=$('select[id=edit_field]').val();
    var modifyValue=$('input[id=sql_value]').val();

    var selectTd=document.createElement("td");
    var selectText=document.createTextNode(str);
    selectTd.appendChild(selectText);

    var modifyTd=document.createElement("td");
    var modifyText=document.createTextNode(modifyValue);
    modifyTd.appendChild(modifyText);


    var aTd=document.createElement("td");
    var aElement=document.createElement("a");
    aElement.setAttribute("href","deleteEmp?id="+str);
    var deleteText=document.createTextNode("Delete");
    aElement.appendChild(deleteText);
    aTd.appendChild(aElement);

    var trElement=document.createElement("tr");

    trElement.appendChild(selectTd);
    trElement.appendChild(modifyTd);
    trElement.appendChild(aTd);


    var tableElement=document.getElementById("usertable");

    var tbodyElement=document.createElement("tbody");
    tbodyElement.appendChild(trElement);
    tableElement.appendChild(tbodyElement);
    aElement.οnclick=function(){
        //return false使網頁的鏈接失效
        return delTr(aElement);
    }
   function delTr(aELement){
    var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue;
    var flag=window.confirm("您真的要刪除["+str+"]嗎?");
    //點擊"取消"按鈕
    if(!flag){
        return false;
    }

    /*刪除*********************************************/
    //獲取tbody
    var tbodyElement=aElement.parentNode.parentNode.parentNode;
    //獲取tr
    var trElement=aElement.parentNode.parentNode;
    //刪除
    tbodyElement.removeChild(trElement);
    //使網頁的鏈接失效
    return false;
}
}
</script>

3.獲取表格中的第一列數據，並將值存儲在數組中

<script charset="utf-8" type="text/javascript">
function btnSubmit(){
    alert('hello');
    var tableId=document.getElementById("usertable");
    var str="";
    alert(tableId.rows.length);
    var result=[];
    for(var i=1;i<tableId.rows.length;i++){
        alert(tableId.rows[i].cells[1].innerHTML);
        result.push(tableId.rows[i].cells[1].innerHTML);
    }
}
</script>