js输入框输入点击按钮添加表单元素

添加表单元素

html
<div id="form">
    请输入姓名: <input type="text" id="name"> <br>
    请输入性别: <input type="radio" id="sex" name="sex" checked>男 
    	<input type="radio" name="sex">女<br>
    请输入年龄: <input type="text" id="age">
    <button>添加到表格</button>
</div>
<table id="tab">
    <thead>
        <tr>
            <th  width="20%"><input type="checkbox" id="all">全选</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>张三</td>
            <td>女</td>
            <td>88</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>王五</td>
            <td>女</td>
            <td>1</td>
        </tr>
    </tbody>
</table>
<div id="div1">
    <button>删除所选行</button>
</div>
css
 #form{width: 480px;margin: 30px auto;border: 1px solid #eee;border-radius: 5px;padding: 10px;line-height: 30px;position: relative;}
        button{position: absolute;right: 10px;bottom: 10px;}
        #tab{width: 500px;margin: 30px auto;border-collapse: collapse;}
        th,td{border: 1px solid #000;padding: 5px;}
        tbody tr td:first-child{text-align: center;}
        /*input[type]  属性选择器  选择input标签,并且有type属性input标签*/
        /*input[type = "checkbox"]  选择有type属性并且值为checkbox的input标签*/
        input[type="checkbox"]{width: 15px;height: 15px;}
        #div1{position: relative;width: 480px;padding: 10px;margin: 0 auto;}
js
  var oInput = document.getElementById("form").getElementsByTagName("input");
           var oBut = document.getElementsByTagName("button");
           var oTable = document.getElementsByTagName("table")[0];
           var tBodies = oTable.tBodies[0];
           var allBut = document.getElementById("all");
			
           //2.点击添加到表格,获取输入框中的内容,在表格中添加一行
            oBut[0].onclick = function () {
                //1.创建行
                var tr = document.createElement("tr");

                //3.添加单元格
                tr.appendChild(createNode("td","<input type='checkbox' />"));
                tr.appendChild(createNode("td", oInput[0].value));
                tr.appendChild(createNode("td",oInput[1].checked == true?"男":"女"));
                tr.appendChild(createNode("td", oInput[3].value));

                //2.添加行到表格
                tBodies.appendChild(tr);
                checkAll();
            }

            function createNode(element,text) {
                var td = document.createElement(element);
                td.innerHTML = text;
                return td;
            }



           //3.删除
            oBut[1].onclick = function () {
                for(var i = 0;i<tBodies.rows.length;i++){
                  var oIn = tBodies.rows[i].getElementsByTagName("input")[0];
                  if(oIn.checked == true){ //是选中
                      tBodies.rows[i].remove();
                      i--;
                  }
                }
            }

            //4.点击全选按钮,全选下面所有的input
            allBut.onclick = function () {
                var oI = tBodies.getElementsByTagName("input");
                console.log(oI);
                for(var i = 0;i<oI.length;i++){
                    oI[i].checked = allBut.checked;
                }
            }

            //5.全部选中input时,全选
            checkAll();//一开始就应该初始化
            function checkAll () {
            	var oI = tBodies.getElementsByTagName("input");
            	for(var i = 0;i<oI.length;i++){
	                oI[i].onclick = function () {
	                    //假设全选了,然后去循环验证假设是否成立,
	                    //如果有任何一个input没有被选中,假设不成立,则为false
	                    var tr = true;  //假设
	                    for(var j = 0;j<oI.length;j++){
	                        if(oI[j].checked == false){
	                            tr = false;
	                            break;
	                        }
	                    }
	                    allBut.checked = tr;
	                }
	            }
            }
        }

效果图
在这里插入图片描述

  • 9
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的登录页面设计示例: ```html <!DOCTYPE html> <html> <head> <title>登录页面</title> <style> body { margin: 0; padding: 0; background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { margin: 50px auto; max-width: 500px; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } h1 { text-align: center; color: #333; } form { display: flex; flex-direction: column; align-items: center; margin-top: 20px; } input[type="text"], input[type="password"] { padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 400px; font-size: 16px; } input[type="submit"] { background-color: #333; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease-in-out; } input[type="submit"]:hover { background-color: #555; } </style> </head> <body> <div class="container"> <h1>登录页面</h1> <form> <label for="username">用户名:</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码"> <input type="submit" value="登录"> </form> </div> </body> </html> ``` 在这个示例中,我们使用了HTML来定义页面的结构,CSS来设置样式和布局,JavaScript可以用来添加交互和验证等功能,但在这个简单的登录页面中,我们并没有使用JavaScript。在这个页面中,我们包括了一个包容性的 div 容器,一个标题,一个表单,两个输入框和一个提交按钮,所有的元素都被精心设计和布局,以提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值