案例，动态表格 单网页

最新推荐文章于 2021-06-03 13:26:22 发布
最新推荐文章于 2021-06-03 13:26:22 发布
阅读量134 收藏
点赞数
分类专栏： 素材
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36104710/article/details/107563512
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例动态表格</title>
    <style>
        div{
            text-align: center;
            width: 840px;
            margin: auto;
            border: solid 1px darkblue;


        }
        table{
            margin: auto;
            border: solid 1px;
            width: 480px;
        }
        tr,td,th{
            border: solid 1px;
        }


    </style>
</head>
<body>
<div >
    <input type="text"   id="no"     placeholder="请输入编号">

    <input type="text"   id="name"   placeholder="请输入姓名">

    <input type="text"   id="sex"    placeholder="请输入性别">

    <input type="button" id="btnadd" value="提交" >
</div>
<div>
    <table id="t">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

    </table>

</div>
<script>
  //  var no    =  document.getElementById("no").value;
   // var name  =  document.getElementById("name").value;
  //  var sex   =  document.getElementById("sex").value;
    var btnadd=  document.getElementById("btnadd");

    btnadd.onclick=function () {
        var no    =  document.getElementById("no").value;
        var name  =  document.getElementById("name").value;
        var sex   =  document.getElementById("sex").value;
        var t=  document.getElementById("t"); //获取table元素 通过ID


        var td1 = document.createElement("td");   //创建4个td元素
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");

        var td1nr = document.createTextNode(no);//创建td1的内容
        var td2nr = document.createTextNode(name);//创建td2的内容
        var td3nr = document.createTextNode(sex);//创建td3的内容
        var td4nr = document.createElement("a");//创建td4的内容
        td4nr.setAttribute("href","javascript:void(0);")        //超链接形式，但是不重定向
        td4nr.setAttribute("onclick","byq(this)");                  //点击事件 运行函数，this指本条
        td4nr.appendChild(document.createTextNode("删除"))
        var tr = document.createElement("tr"); //创建tr元素


        td1.appendChild(td1nr);  //td1 追加内容 1
        td2.appendChild(td2nr);  //td2 追加内容 2
        td3.appendChild(td3nr);  //td3 追加内容 3
        td4.appendChild(td4nr);  //td4 追加内容 4



        tr.appendChild(td1);    //tr元素追加子元素 td1
        tr.appendChild(td2);    //tr元素追加子元素 td2
        tr.appendChild(td3);    //tr元素追加子元素 td3
        tr.appendChild(td4);    //tr元素追加子元素 td4

         t.appendChild(tr);     //table元素追加子元素tr

    }

  function byq(obj1) {
      var table = obj1.parentNode.parentNode.parentNode;   //找到要删除的table元素对象
      var tr = obj1.parentNode.parentNode; //找到要删除的tr元素对象
      table.removeChild(tr); //移除 table内的tr

  }



</script>
</body>
</html>

**********************************************************************

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例动态表格</title>
    <style>
        div{
            text-align: center;
            width: 840px;
            margin: auto;
            border: solid 1px darkblue;


        }
        table{
            margin: auto;
            border: solid 1px;
            width: 480px;
        }
        tr,td,th{
            border: solid 1px;
        }


    </style>
</head>
<body>
<div >
    <input type="text"   id="no"     placeholder="请输入编号">

    <input type="text"   id="name"   placeholder="请输入姓名">

    <input type="text"   id="sex"    placeholder="请输入性别">

    <input type="button" id="btnadd" value="提交" >
</div>
<div>
    <table id="t">
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
      <!--  <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td><a οnclick="byq(this)" href="javascript:void(0);">删除</a></td>
        </tr> -->

    </table>

</div>
<script>

    var btnadd=  document.getElementById("btnadd");

    btnadd.οnclick=function () {

        var t = document.getElementById("t");

       var no= document.getElementById("no").value;
       var name = document.getElementById("name").value;
       var sex= document.getElementById("sex").value;


      t.innerHTML =t.innerHTML+"<tr>\n" +
          "            <td>"+no+"</td>\n" +
          "            <td>"+name+"</td>\n" +
          "            <td>"+sex+"</td>\n" +
          "            <td><a οnclick=\"byq(this)\" href=\"javascript:void(0);\">删除</a></td>\n" +
          "        </tr>";
    }

      function byq(obj1) {
      var table = obj1.parentNode.parentNode.parentNode;   //找到要删除的table元素对象
      var tr = obj1.parentNode.parentNode; //找到要删除的tr元素对象
      table.removeChild(tr); //移除 table内的tr

  }



</script>
</body>
</html>
BYQ是什么呢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动态表格案例
H1517043456的博客
03-09 507
这几天学习了Javaweb的一些知识。由于是初学Javaweb，所以从HTML一点点开始学习的，自学好几天终于学到了JavaScript，而今天也用刚学到了标签对象方法的内容，便用这个做了一个动态表格。其实这个做起来挺简单，步骤也比较固定。不过自己在做的过程中还是遇到了几个问题，在网页上看了许久都没看到错在那里，网上去查也没找到。后来终于看到了问题所在，于是写在博客中以此提醒自己。 这是我在学习...
JavaScript 动态网页实例 —— 表格处理
cccloveforever的博客
05-24 929
表格是网页设计中必不可少的内容之一。本章首先介绍HTML中普通表格的组成结构，然后，在此基础上，介绍如何使用JavaScript设置表格的属性。随后，更具体地介绍操作表格元素的一般方法，主要是对表格行、列的动态增删操作。有了这些基础，在本章的最后介绍对表元的操作，即如何动态修改表格单元格中的内容。
js简易动态表格
jfr123的博客
11-08 288
js动态表格 效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table { border: 1px...
在html页面中动态添加表格数据,[Javascript]在HTML页面中动态添加表格，动态生成行的示例...
weixin_39710951的博客
06-03 391
/p>"http://www.w3.org/TR/html4/loose.dtd">动态添加表格示例//CopyRight@liwei 2005/11//动态删除行的函数还没有完成。注意innerHTML里面的控件代码属性赋值的时候不要使用引号function addLine(){var newLine = planTable.rows.length;var row = planTab...
HTML页面创建动态表格JavaScript和jQuery
UncleGen的博客
05-22 4419
前言 只用HTML创建静态表格好说，遇到不确定长度表格的时候就不行了，这里分别给出JavaScript和jQuery两种创建动态表格的方法，本质是一样的 方法 JavaScript方法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &l
动态表格
空白
07-01 794
动态模拟实现购物车的功能 方法1：js实现： 效果图： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ background: lavende...
JavaScript(JS)网页--动态生成表格
Dreamer
11-23 6655
JavaScript(JS)网页–动态生成表格 在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行最后申城一个单元格，加入删除操作，点击删除可以删除此行。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewpo
JavaScript实现网页动态生成表格
01-21
JavaScript(JS)网页–动态生成表格，供大家参考，具体内容如下 在网页中，动态生成列表的内容，将数组中的object加入到列表中（没学到数据库）。在HTML中创建thead，然后通过JavaScipt动态生成tbody。并且在每行...
HTML.rar_表格网页
09-22
本案例“HTML.rar_表格网页”聚焦于如何利用HTML来设计和布局网页中的表格。 在HTML中，表格是一个非常重要的元素，常用于展示数据或组织信息。表格的创建通过`<table>`标签开始，`</table>`标签结束。每个表格由行...
网页制作案例汇集
05-28
这个压缩包中包含了不同类型的网页设计示例，特别强调了"表格"、"动态表单"和"动态网页"这三个关键知识点。 首先，我们要了解表格在网页制作中的应用。表格是组织和展示数据的基本工具，它允许我们将信息结构化地...
jQuery JSON动态获取表格数据代码
06-24
在本案例中，“jQuery JSON动态获取表格数据代码”涉及到的技术是利用jQuery从服务器获取JSON格式的数据，并将其动态地渲染到HTML表格中，同时提供了对表格的交互功能，如折叠和展开表格行。 首先，我们来详细理解...
html费用报销单表格代码
06-24
HTML费用报销单表格代码是一种基于HTML的网页元素布局技术，用于构建一个用户友好的界面，让用户能够方便地填写和提交费用报销信息。HTML（HyperText Markup Language）是网页开发的基础，它通过标记语言来描述网页...
[Javascript]在HTML页面中动态添加表格，动态生成行的示例
热门推荐
小李专栏
11-18 1万+
"http://www.w3.org/TR/html4/loose.dtd">动态添加表格示例//CopyRight@liwei 2005/11//动态删除行的函数还没有完成。注意innerHTML里面的控件代码属性赋值的时候不要使用引号function addLine(){    var newLine = planTable.rows.length;    var row = planTabl
页面动态表格，功能：添加，编辑，修改，删除
一只野生程序猿从入门到入土的学习之路
06-25 4041
链接：https://pan.baidu.com/s/1C2rgqrMT7XGYf48QsoUr4g 密码：m66j
web项目中的动态表格
CC_R_3344的博客
05-12 3147
Dynamic Table
html如何制作动态表格，增加或者删除
weixin_41808376的博客
03-08 1万+
功能如图所示核心代码如下html部分 &lt;div class="extends" &gt; &lt;div class="extends_item" style="height:400px;width:100%; padding-left:1%" &gt; &lt;div class="title"&gt;&lt;span style=&
HTML表格表单案例
weixin_45969078的博客
11-02 1605
1、表格案例 要求： 按照如下形式创建员工入职登记表，要求 （1）性别（男 女）、婚姻状况（已婚，未婚）、政治面貌（党员，团员）、血型（A,B ,AB）用单选按钮 （2）民族使用下拉列表(汉，苗，回) （3）使用表单提交数据 ； （4）照片使用文件上传 代码 <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/
简单的动态网页(表格)——将SQL Server的数据读入表格中
yangaoyuan1999的博客
04-17 2501
实现步骤： 1.把静态网页读到内存中 2.把班级信息从数据库中读出来（运用ADO.NET） 3.创建一个虚拟表存适配后的数据 4.将SQL数据库和C#连接 5.创建SQL适配器对象，通过适配器对象执行SQL语句 6.通过循环语句，将虚拟表DataTable里的数据，拼写成有html标记包裹住的字符串 7.采用替换把生成的字符串 嵌入静态页的tbody标签里...
工业视觉智能-分割模型基础知识
最新发布
08-18
根据《阿里云工业视觉智能高级工程师ACP认证免费课程》（https://edu.aliyun.com/course/3128115/lesson/342981389）创建的个人笔记
html网页制作表格代码案例
12-15
以下是一个简单的HTML表格代码案例： ```html <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> </table> ``` 这个表格包含了一个表头和两行数据，每行数据包含了三列：姓名、年龄和性别。在HTML中，表格由`<table>`标签开始，由`</table>`标签结束。表头由`<tr>`标签开始，由`</tr>`标签结束，并且表头中的每一列都由`<th>`标签开始，由`</th>`标签结束。数据行也由`<tr>`标签开始和结束，但是每一列都由`<td>`标签开始和结束。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值