js实现动态表单输入

南风不渐暖

已于 2022-03-02 11:41:53 修改

阅读量764

点赞数

文章标签： javascript html css forms

于 2021-11-13 17:21:34 首次发布

本文链接：https://blog.csdn.net/Fmwrong/article/details/121307221

版权

1.js实现动态表单输入

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="checkDemo.css"/>


    <script src="global.js"></script>

</head>

<body>
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>JavaScript</td>
            <td>中国大学慕课</td>
            <td><a  class="get">GET</a></td>
        </tr>
        <tr>
            <td>css</td>
            <td>中国大学慕课</td>
            <td><a  class="get">GET</a></td>
        </tr>
        <tr>
            <td>html</td>
            <td>中国大学慕课</td>
            <td><a  class="get">GET</a></td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>中国大学慕课</td>
            <td><a  class="get">GET</a></td>
        </tr>
        </tbody>
    </table>
</div>
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>

        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" placeholder="中国大学慕课">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>

<script>
    //加载全部数据
    window.οnlοad=function(){
        //点击添加数据按钮时
        document.getElementById('j_btnAddData').οnclick=function (){
           //背景画布显示
            document.getElementById('j_mask').style.display='block';
            //输入表单显示
            document.getElementById('j_formAdd').style.display='block';
        }

        //点击X关闭按钮时
        document.getElementById('j_hideFormAdd').οnclick=function (){
           //背景画布关闭
            document.getElementById('j_mask').style.display='none';
            //输入表单关闭
            document.getElementById('j_formAdd').style.display='none';
        }
        //点击添加按钮时
        document.getElementById('j_btnAdd').οnclick=function (){
            //第一列：课程名称
            var one=document.getElementById('j_txtLesson');
            //第二列：所属学院
            var two=document.getElementById('j_txtBelSch');

            //第一列传入的值
            var lesson= one.value;
            var belsch= two.value;

            //创建行节点   节点名=标签名的大写
            var tr=document.createElement('tr');
            //每一行里面三个格
            //第一格
            var td1=document.createElement('td');
            var text1=document.createTextNode(lesson);
            td1.appendChild(text1);
            tr.appendChild(td1);

            //第二格
            var td2=document.createElement('td');
            var text2=document.createTextNode(belsch);
            td2.appendChild(text2);
            tr.appendChild(td2);

            //第三格
            var td3=document.createElement('td');
            //点击删除效果的 get
            var a=document.createElement('a');
            a.className='get';
            var text3=document.createTextNode('GET');
            a.appendChild(text3);
            //当点击GET的时候，
            a.οnclick=function(){
                //找到最外层tr节点的父节点，用父节点删除子节点tr
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
            }
            td3.appendChild(a);
            tr.appendChild(td3);

            //找到表单的内容部分
            var tbody=document.getElementById('j_tb');
            //在内容部分的末尾追加上面新创建的tr
            tbody.appendChild(tr);

            //追加完，在弹出表单中设置
            one.value='';
            two.value='';
            //隐藏背景画布跟弹出输入表单
            document.getElementById('j_mask').style.display='none';
            document.getElementById('j_formAdd').style.display='none';
        }

        //通过类名获取 这个类名的所有元素
        var gets=gclass('get');
        for(let i=0;i<gets.length;i++){
            //点击get的时候删除整个tr
            gets[i].οnclick=function(){
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
            }
        }


    }


</script>


</body>

</html>

用到的global.js函数

//通过类名获取所有元素的方法
//两个参数： 类名；标签名
function gclass(className,tagName){
    var allTags=document.getElementsByTagName(tagName||"*");
    var arr=new Array();

    for(let i=0;i<allTags.length;i++){
        var one=className.split(' ');
        var two=allTags[i].className.split(' ');

        if(isHasArray(one,two)){
            arr[arr.length]=allTags[i];
        }
    }
    //返回所有的类元素集合
    return arr;
}

3.checkDemo.css样式文件

* {
  padding: 0;
  margin: 0;
}

.wrap {
  width: 410px;
  margin: 100px auto 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #c0c0c0;
}

th,
td {
  border: 1px solid #d0d0d0;
  color: #404060;
  padding: 10px;
}

th {
  background-color: #09c;
  font: bold 16px "΢���ź�";
  color: #fff;
}

td {
  font: 14px "΢���ź�";
}

td a.get {
  text-decoration: none;
}

a.del:hover {
  text-decoration: underline;
}

tbody tr {
  background-color: #f0f0f0;
}

tbody tr:hover {
  cursor: pointer;
  background-color: #fafafa;
}

.btnAdd {
  width: 110px;
  height: 30px;
  font-size: 20px;
  font-weight: bold;
}

.form-item {
  height: 100%;
  position: relative;
  padding-left: 100px;
  padding-right: 20px;
  margin-bottom: 34px;
  line-height: 36px;
}

.form-item > .lb {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100px;
  text-align: right;
}

.form-item > .txt {
  width: 300px;
  height: 32px;
}

.mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #000 url("1.jpg") no-repeat center;
  opacity: 0.15;
  display: none;
}

.form-add {
  position: fixed;
  top: 30%;
  left: 50%;
  margin-left: -197px;
  padding-bottom: 20px;
  background: #fff;
  display: none;
}

.form-add-title {
  background-color: #f7f7f7;
  border-width: 1px 1px 0 1px;
  border-bottom: 0;
  margin-bottom: 15px;
  position: relative;
}

.form-add-title span {
  width: auto;
  height: 18px;
  font-size: 16px;
  font-family: ����;
  font-weight: bold;
  color: rgb(102, 102, 102);
  text-indent: 12px;
  padding: 8px 0px 10px;
  margin-right: 10px;
  display: block;
  overflow: hidden;
  text-align: left;
}

.form-add-title div {
  width: 16px;
  height: 20px;
  position: absolute;
  right: 10px;
  top: 6px;
  font-size: 30px;
  line-height: 16px;
  cursor: pointer;
}

.form-submit {
  text-align: center;
}

.form-submit input {
  width: 170px;
  height: 32px;
}

南风不渐暖

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现动态表单输入

1.js实现动态表单输入<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="checkDemo.css"/> <script src="global.js"></script></head&g
复制链接

扫一扫