JavaScript基础——HTML表单事件

最新推荐文章于 2024-04-07 16:33:25 发布

Katle

最新推荐文章于 2024-04-07 16:33:25 发布

阅读量352

点赞数

分类专栏： JavaScript 文章标签： JavaScript 表单基础动态表单设计

本文链接：https://blog.csdn.net/qq_41096610/article/details/89607956

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript基础之HTML表单事件

表单在我们网页制作中非常重要，当我们每登录一个网站时，首先要做的就是登录注册，而登录注册往往就要用到表单，课件表单在网页制作中非常重要。在这一段时间JavaScript的学习中，对JavaScript中的表单事件有了一定心得，以下是一些总结。

表单元素

表单的常用元素有：
① form：表单标签，用于收集用户的输入；
② input：text表示文本框，password密码框，radio表示单选框，只能选一个，checkbox表示复选框，可多选：
③ select：表示下拉列表：
④ textarea：表示文本域;：
⑤ button：表示按钮；

表单常见操作

① 提交表单：submint()方法；
② 重置表单：reset（）方法；

表单脚本

获取表单有三种常用的方法，分别是：
① 根据form的id来获得：document.getElementById(‘yourFormId’);
② 根据form的name属性来获取：document.forms[‘yourFormName’]；
③ 根据form在整个HTML文档中的from的数量位置下标来获取：document.forms[0]；
注意，其中document.getElementById(’’);是最快捷方便的方法，在平时写程序的时候可以常用。
下面以一个例子来说明表单事件：实现一个表格的动态创建。
要求：表格表头内容为"编号，学号，姓名，年龄，手机号，操作"，操作列包括两个按钮【添加】【删除】可以动态为这个表格添加行，也可以删除行。
下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
</head>
<body>

  <table border="1" width="1100px" id="editTable">
    <tr>
      <th>编号</th>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>手机号</th>
      <th>
        <input type="button" value="新增" onclick="createRow()">
        <input type="button" value="删除" onclick="delRow()">
      </th>
    </tr>
    <tbody id="tbody">

    </tbody>
  </table>

<script type="text/javascript">
    function createRow(){
      var editTable = document.getElementById("tbody");
      var tr = document.createElement("tr");
      var td0 = document.createElement("td");
      td0.innerHTML="<input type='text' />";
      var checkbox = document.createElement("input");
      checkbox.type="checkbox";
      checkbox.name="checkRow";
      var td1 = document.createElement("td");
      td1.innerHTML="<input type='text' />";
      var td2 = document.createElement("td");
      td2.innerHTML="<input type='text' />";
      var td3 = document.createElement("td");
      td3.innerHTML="<input type='text' />";
      var td4 = document.createElement("td");
      td4.innerHTML="<input type='text' />";
      var td5 = document.createElement("td");
      td5.appendChild(checkbox);
      tr.appendChild(td0);
      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);
      tr.appendChild(td4);
      tr.appendChild(td5);
      editTable.appendChild(tr);
    }
    function delRow()
    {
      var editTable = document.getElementById("tbody");
      if(confirm("确认删除所选?")){
        var checkboxs = document.getElementsByName("checkRow");
        for(var i=0;i<checkboxs.length;i++)
        {
          if(checkboxs[i].checked){
            var n=checkboxs[i].parentNode.parentNode;
            editTable.removeChild(n);
            i--;
          }
        }
      }
    }
</script>
</body>
</html>

结果：
在这里插入图片描述
JavaScript中有关HTML表单的学习还有很多，每一步都应该仔细踏实的去做。

Katle

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——HTML表单事件

JavaScript基础之HTML表单事件表单在我们网页制作中非常重要，当我们每登录一个网站时，首先要做的就是登录注册，而登录注册往往就要用到表单，课件表单在网页制作中非常重要。在这一段时间JavaScript的学习中，对JavaScript中的表单事件有了一定心得，以下是一些总结。表单元素表单的常用元素有：① form：表单标签，用于收集用户的输入；② input：text表示文本框，...
复制链接

扫一扫