使用js实现表格的添加和删除

最新推荐文章于 2022-11-26 08:37:51 发布

Bluce-orancle

最新推荐文章于 2022-11-26 08:37:51 发布

阅读量533

点赞数

分类专栏：综合

本文链接：https://blog.csdn.net/bluce_orancle/article/details/68064360

版权

综合专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>