js基础-表格中添加删除练习

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量80 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45247439/article/details/124841057
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
        
      }
      table,
      th,
      td {
        border: 1px solid greenyellow;
        margin: 50px auto;
      }
    </style>

    <script>
      //删除功能
      function delA(){
              //点击哪个超链接this就是谁
              var tr = this.parentNode.parentNode;
              var name = tr.getElementsByTagName("td")[0].innerHTML;
              // confirm有返回值，true为确认，false为取消
              var flag = confirm("确认删除"+name+"吗？");
              if(flag){
                tr.parentNode.removeChild(tr);
              }
              
            };
        window.onload = function(){
          // 1.删除功能，点击删除键，删除所在行
          //1.获取所有的delete超链接
          var allA = document.getElementsByTagName("a");
          //for循环在页面加载完成之后就会执行，而响应函数只有在点击时才执行
          for(var i=0; i<allA.length; i++){
            allA[i].onclick = delA;
          }

          //2.新增员工
           var sub = document.getElementById("submit");
           sub.onclick = function(){
             //获取姓名Name，邮件Email，工资Salary
             var name = document.getElementById("Name").value;
             var email = document.getElementById("Email").value;
             var salary = document.getElementById("Salary").value;
             
            //  将获取到的信息保存到tr中
            var tr = document.createElement("tr");
            /*
      <tr>
        <td>Lily</td>
        <td>123@.com</td>
        <td>10000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
            */
            tr.innerHTML = "<td>"+name+"</td>"+
                            "<td>"+email+"</td>"+
                            "<td>"+salary+"</td>"+
                            "<td><a href='javascript:;''>Delete</a></td>";

            var a = tr.getElementsByTagName("a")[0];
            a.onclick = delA;
            var table = document.getElementById("firstTable");
            var tbody = table.getElementsByTagName("tbody")[0];
            tbody.appendChild(tr);

           };
        };
    </script>

  </head>
  <body>
    <table border="1" id="firstTable">
      <!-- 页面会默认地添加tbody属性 -->
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>Lily</td>
        <td>123@.com</td>
        <td>10000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
      <tr>
        <td>Mark</td>
        <td>123456@.com</td>
        <td>1000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
      <tr>
        <td>Lucy</td>
        <td>99999999@.com</td>
        <td>88000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
    </table>

    <table>
      <caption>
        添加新员工
      </caption>
      <tr>
        <td>Name</td>
        <td>
          <input id="Name" name="Name" type="text" />
        </td>
      </tr>
      <tr>
        <td>Email</td>
        <td>
          <input id="Email" name="Email" type="text" />
        </td>
      </tr>
      <tr>
        <td>Salary</td>
        <td>
          <input id="Salary" name="Salary" type="text" />
        </td>
      </tr>
      <tr>
        <td><input type="submit" value="提交" id="submit" /></td>
      </tr>
    </table>
  </body>
</html>
不闻钟-nnnn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js基础-dom增删改练习
不闻钟的博客
05-16 206
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>dom
js、table表格 插入、新增、删除自定义行
qiang928的博客
11-19 2304
js、table表格 插入、新增、删除自定义行
JS添加，删除Table行
哈利路亚的收藏夹
09-17 5246
JS动态添加Table行地方法 第一种是适用IE8的，appendChild 后来发现IE6下面不行，原来是DOM支持不一样啊。虽然知道，但是这东西还这麻烦。 为什么JS标准这么不统一！！！ 没办法又试着谢了AddRow2等相应的方法，用的insertRow。通用性稍微好一点。 都贴出来给大家
js 动态给table添加、删除行。
weixin_33701617的博客
07-02 165
1.添加table 行 function addtablTr() { var $table = $("#abc"); var vTr = '<tr><td>选项名称：</td><td><input type="text" name="chooseName" size="20" maxlength="50" placeholde...
JS—Table中添加、删除行
zbzhangzi的专栏
03-31 90
js   //全局变量 var trId = 1; //添加一行 function addTr(){ var content = document.getElementById("content"); var selectId = document.getElementById("selectId"); var myform = docume...
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
WEB前端技术-表格元素练习
12-27
9. JavaScript和表格操作：通过JavaScript，开发者可以实现动态添加、删除表格行或列，以及实现交互功能，如排序、过滤、搜索等。 10. 表格的现代实践：随着Web技术的发展，像`<data>`和`<details>`这样的新元素...
JavaScript-Onboarding:练习和学习javascript基本功能和高级功能
04-04
练习和学习javascript基本功能和高级功能 1. AJAX-Vallina Javascript 注意力 If you want to run this application, Please replace and use your own API service! 。 GET XMLHttpRequest POST XMLHttpRequest 2...
JS对HTML表格进行增删改操作
10-21
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现对HTML表格的增删改操作。这个话题对于前端开发者来说非常实用，因为它涉及到网页动态交互和数据管理的基础知识。我们将从以下几个方面进行详细讲解： 1. *...
交互式表格2020：交互式表格练习
02-24
- 动态添加/删除行：根据用户需求动态地添加或删除表格行。 4. **AJAX与异步更新** - 通过AJAX，可以实现表格数据的异步加载和更新，无需刷新整个页面。 - JSON格式常用于传输表格数据，因为其结构清晰，易于...
S2使用JavaScript增强交互效果 上机练习 操纵表格order.html
10-18
5. **动态添加/删除行**：利用JavaScript，可以实现动态添加新的行到表格，或者根据用户需求删除现有行。`insertRow()`和`deleteRow()`是两个常用的方法。 6. **表单验证**：如果表格包含输入字段，可能需要进行...
js在指定的table行后添加新行（js实现select数据的填充，添加行，删除行）
蓝色梦幻
01-08 4637
无标题文档         body{width:900px; height:600px;margin: 0px auto; }       body,ul,table,li,pre,dd,dt,tr,th,td,{padding:0px;border:0px; margin:0px;font-size: 14px;}       .container{text-align:center
js 操作table添加行并赋值、取值、删除选中的行
长流的博客
11-27 4092
一、EL表达式赋值table ​ &lt;table border="1" width="100%" id="tableID"style="border-collapse:collapse;text-align:center"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;选择&lt;/th&
js表格动态操作
10-12 893
html>    head>    meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">    style   type="text/css">*{font-size:14px}button{margin:3px}style>    script   type="text/javascript">    
js按钮确认删除提示
liyongchunscr的博客
09-07 2658
第一种方法： html代码： 1 <a href="" οnclick="javascript:return del();">删除</a> js代码： 1 function del() { 2 var msg = "您真的确定要删除吗？\n\n请确认！"; 3 if (confirm(msg)==true){ 4 return true; 5 }else{ 6 return false; 7 } 8 } 第二种方法： 1 <input type="
JS-Table动态增加删除行
热门推荐
在路上
04-19 1万+
JS代码块<script> function add(){ //获取元素的值 var name = document.getElementById("name").value; var tel = document.getElementById("tel").value;
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 763
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 419
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
航天宏图PIE-EngineStudio JS开发基础教程
这篇文档是关于航天宏图PIE-EngineStudio中JavaScript（JS）的基础教程。JS是一种广泛应用于Web开发的轻量级、解释型编程语言，由布兰登·艾奇于1995年创建，并逐渐发展成为ECMA标准的一部分。JS以其灵活的面向原型...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值