表单使用

最新推荐文章于 2019-12-21 16:46:19 发布

原创最新推荐文章于 2019-12-21 16:46:19 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何利用Bootstrap框架实现HTML表格的动态增删功能，通过JavaScript代码，可以实现在表格中添加新行和删除现有行，同时保持良好的用户交互体验。

##用bootstrap实现表单，增加一条记录删除一条记录

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
    <!--    <script src="JQuery/jquery-3.4.1.min.js"></script>-->
    <!--    <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>-->
</head>

<body>
<form name="myForm">
    <table class="table table-bordered" id="tab" name="tab" border="0px">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
            <td>操作</td>
            <td>操作</td>
        </tr>
        <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>1</td>
            <td>小明</td>
            <td>20</td>
            <td>浙江</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>2</td>
            <td>亲贤臣</td>
            <td>16</td>
            <td>江西</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
        <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
            <td>3</td>
            <td>郭海涛</td>
            <td>20</td>
            <td>上海</td>
            <td><a href="#" onclick="addRow()">添加</a></td>
            <td><a href="#" onclick="deleteRow(this)">删除</a></td>
        </tr>
    </table>
</form>
</body>
<script>
    var selectRow=null;
    //单击时,改变样式;
    function onClickChangeStyle(obj){
        //获取表格对象;
        var tab = document.getElementById("tab");
        //获取当前行选择下标;
        var currentRowIndex = obj.rowIndex;
        //获取表格所有行数;
        var tablRows = tab.rows.length;
        //循环表格的所有行;并且选择的当前行，改变背景颜色；
        for(var i = 1;i<tablRows;i=i+1){
            if(currentRowIndex == i){
                //为选中的当前，设置css样式;
                selectRow  = tab.rows[i];
                tab.rows[i].className= "onClickStyle";
            }else{
                //把没有选中的行的背景样式设置为白色;
                tab.rows[i].className= "hideStyle";
            }
        }
    }

    //鼠标移入时，改变颜色;
    function onmouseOverMethod(selectThis){
        selectThis.className="displayStyle";
        if(selectRow==selectThis){
            selectThis.className="onClickStyle";
        }
    }

    //鼠标移除时，改变背景颜色;
    function onmouseOutMethod(selectThis){
        selectThis.className="hideStyle";
        if(selectRow == selectThis){
            selectThis.className="onClickStyle";
        }
    }

    //添加行;
    function addRow(){
        var tab = document.getElementById('tab');
        var rowIndex = tab.rows.length+1;

        //添加一行;
        var tr  = tab.insertRow();
        tr.onmouseover = tr.className="displayStyle" ;
        tr.onmouseout = tr.className="hideStyle" ;
        tr.onclick=function (){this.className="onClickChangeStyle(this)";}

        var td2 = tr.insertCell();
        var td3 = tr.insertCell();
        var td4 = tr.insertCell();
        var td5 = tr.insertCell();
        var td6 = tr.insertCell();
        var td7 = tr.insertCell();

        td2.innerHTML = ""+rowIndex;
        td3.innerHTML = "无";
        td4.innerHTML = "无";
        td5.innerHTML = "无地址";
        td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";
        td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";

        //初始化行;
        initRows(tab);
    }

    //初始化行,设置序列号;
    function initRows(tab){
        var tabRows = tab.rows.length;
        for(var i = 0;i<tabRows.length;i++){
            tab.rows[i].cells[0].firstChild.value=i;
        }
    }

    //删除行;(obj代表连接对象)
    function deleteRow(obj){
        var tab = document.getElementById('tab');
        //获取tr对象;
        var tr = obj.parentNode.parentNode;

        if(tab.rows.length>2){
            //tr.parentNode，指的是，table对象;移除子节点;
            tr.parentNode.removeChild(tr);
        }
        //重新生成行号;
        initRows(document.getElementById('tab'));
    }
</script>
</html>