使用JS完成表格的动态删除与创建项目效果

最新推荐文章于 2023-11-30 09:18:07 发布
最新推荐文章于 2023-11-30 09:18:07 发布
阅读量108 收藏 1
点赞数
文章标签： javascript servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rlqabc/article/details/125544927
版权

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title></title>

 </head>

 <style type="text/css">

  div{

   text-align:center;

   box-sizing: border-box;

   width:100%;

  }

  #div1{

   

   margin-left: 300px;

   width: 800px;

   margin-top: 50px;

  }

  #div2{

   

   margin-left: 300px;

   width: 800px;

   padding-top:50px;

  }

  #table_id{

    width: 580px;

   }

 </style>

 <body>

  <div id="div0">

   <div id="div1">

   <input type="text" id="userid"  placeholder="请输入编号" />

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

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

   <input type="button" value="添加" id="add"/>

  </div>

  <div id="div2">

   <table border="1px" align="center" id="table_id">

    <caption style="font: '微软雅黑';font-size:20px;">学生信息表</caption>

    <tr>

     <th>编号</th>

     <th>姓名</th>

     <th>性别</th>

     <th>操作</th>

    </tr>

    <tr>

     <td>1</td>

     <td>令狐冲</td>

     <td>张无忌</td>

     <td><input type="button" value="删除" style="color: blue;" οnclick="delTr(this)"/></td>

    </tr>

    <tr>

     <td>1</td>

     <td>令狐冲</td>

     <td>张无忌</td>

     <td><input type="button" value="删除" style="color: blue;" οnclick="delTr(this)" /></td>

    </tr>

    <tr>

     <td>1</td>

     <td>令狐冲</td>

     <td>张无忌</td>

     <td><input type="button" value="删除"style="color: blue;" οnclick="delTr(this)"/></td>

    </tr>

   </table>

  </div>

  </div>

 </body>

 <script type="text/javascript">

  // 当点击添加按钮时触发下面的方法

     document.getElementById("add").οnclick=function(){

   // 获取每个文本框中的内容

   var id = document.getElementById("userid").value;

   var name = document.getElementById("username").value;

   var gender = document.getElementById("gender").value;

   

  /* // 添加id

   var td_id = document.createElement("td");

   var text_id = document.createTextNode(id);

   td_id.appendChild(text_id);

   

   // 添加username

   var td_username = document.createElement("td");

   var text_username = document.createTextNode(name);

   td_username.appendChild(text_username);

     

   // 添加gender

   var td_gender = document.createElement("td");

   var text_gender = document.createTextNode(gender);

   td_gender.appendChild(text_gender);

   

   // 添加按钮

   var td_button = document.createElement("td");

   var ele_input = document.createElement("input");

   ele_input.setAttribute("type","button");

   ele_input.setAttribute("value","删除");

   ele_input.setAttribute("onclick","delTr(this)");

   ele_input.style.color="blue";

   td_button.appendChild(ele_input);

   

   var ele_tr = document.createElement("tr");

      ele_tr.appendChild(td_id);

   ele_tr.appendChild(td_username);

   ele_tr.appendChild(td_gender);

   ele_tr.appendChild(td_button);

   var ele_table =  document.getElementsByTagName("table")[0];

   

   ele_table.appendChild(ele_tr);*/

   

   

   //  使用innerHtml的方法动态添加表格

   var  tab = document.getElementsByTagName("table")[0];

   tab.innerHTML+="<tr>\n"+

    "<td>"+id+"</td>\n"+

    "<td>"+name+"</td>"+

    "<td>"+gender+"</td>"+

    "<td><input type='button' value='删除' οnclick='delTr(this)' style='color:blue'/></td>"+

    "</tr>"

  }

       

   function delTr(obj){

   

    var table =  obj.parentNode.parentNode.parentNode;

    var tr = obj.parentNode.parentNode;

    table.removeChild(tr);  

   }

 </script>

</html>

 

 

柠柒.024
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 操作表格动态添加和删除行
03-30
js 操作表格动态添加和删除行
js动态实现表格添加和删除操作
Distance的博客
11-05 5296
运行效果如图（两种实现方案，被注释的是第一种实现方案） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ te...
js动态添加删除表格
09-02
js,javascript
用js动态实现表格的添加和删除
you_very_brave的博客
05-19 682
##直接上代码 <!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"> <tit
JS小功能(操作Table--动态添加删除表格及数据)实现代码
10-26
主要介绍了操作Table--动态添加删除表格及数据实现代码，有需要的朋友可以参考一下
jQuery实现表格元素动态创建功能
10-20
在探讨使用jQuery实现表格元素动态创建的技术细节前，我们先了解一些基础概念。jQuery是一个非常流行的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及AJAX交互的代码编写。利用jQuery进行DOM操作，...
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
10-18
在本文中，我们将探讨如何利用Bootstrap和Vue.js这两个强大的技术栈来实现一个具有动态展示、新增和删除功能的表格。Bootstrap作为流行的前端框架，提供了丰富的UI组件，而Vue.js则是一个轻量级的渐进式JavaScript...
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项...总结来说，动态向JavaScript表格添加数据涉及HTML结构、JavaScript DOM操作、事件处理和数据绑定等多个方面。理解并掌握这些知识点对于构建交互式的Web应用程序至关重要。
vue.js动态表格增加删除修改代码
06-24
在“vue.js动态表格增加删除修改代码”中，我们将探讨如何利用Vue.js实现一个功能丰富的动态表格，包括添加新记录、删除现有记录以及编辑表格中的数据。这个示例可能涉及到以下关键知识点： 1. **Vue实例和数据绑定...
js动态添加表格逐行添加、删除、遍历取值的实例代码
10-18
在处理Web前端交互时，经常会遇到需要动态地对表格进行操作的场景，如动态添加表格行、删除表格行、遍历表格取值等。本文将详细阐述如何使用JavaScript来实现这些功能，并给出具体的代码示例。 ### 动态添加表格行 ...
js表格table的增删改
09-01
js 对表格的动态操作，动态添加，删除，修改
js实现表格中的删除和添加
想快快长大的博客
07-03 316
js实现表格中的删除和添加 以及添加的时候自动添加2个按钮html代码 删除：给每一个删除按钮配置删除按钮本行点功能 var j = 7; function addtr() { var trobj = document.createElement("tr"); for(var i = 0; i < 6; i++) { var tdobj = document.creat...
js实现表格的增删改查
weixin_34194551的博客
01-10 366
这份代码实现了对表格的增加，删除，更改，查询。 点击一次添加按钮，表格会增加一行。 点击重置按钮，输入框的内容会被清空。 添加一行后，最后两格为更改和删除。点击更改，原有内容会各自显示在一个输入框内，此时更改二字变为保存，更改内容后，点击保存，内容又呈现不可更改状态，保存二字又变为修改；点击删除，删除本行。 在搜索框里输入对应文本，点击搜索，表格内匹配的文本背景变为其他颜色。 &lt...
js实现动态添加删除表格数据的两种方式
最新发布
m0_56713342的博客
11-30 1606
思路：先把整体的html结构写出来，table表格分为3部分，其中tbody中的内容通过节点创建出来，删除时，找到其祖先元素的节点进行remove（），表单内的各个框的值对应表格的内容。思路：先把整体的效果图写出来，再通过js渲染到页面上，每次添加一组数据就相当于给数组添加数据，删除事件用事件委托，给祖先元素绑定事件，子元素触发事件会冒泡到祖先元素。
js 简单实现表单数据的增添，单项删改，多项删除，修改以及全选功能
Fickle_actor的博客
08-10 4233
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript">// 添加商品函数 function add(){ // 获取表单元素 var
js添加、修改、删除表格中数据、修改时在表格中直接修改
weixin_30875157的博客
04-02 930
<html> <head> <script type="text/javascript"> function show(){ //切换添加表单 var display=document.getElementById("add"); if(display.style.display=="block"){ displ...
使用JavaScript进行表格的添加和删除以及编辑
阿臻
10-12 1270
菜鸡前端的第四篇博客,感觉还算不上博客。 请叫我菜鸡,也算是每天对自己的一个总结吧 效果如下: 今天写的是一个表格,实现点击按钮能够添加和删除以及改变相关内容 <script> var users = [{ username: "张三", sex: "男", age: 26, }, ...
JS代码实现table表格的增删改操作
qq_45746493的博客
12-13 2213
删除 通过点击按钮实现删除操作，使用remove来删除整行数据。 function deleRow(a){ //通过传参获取他的父级元素tr var tr = a.parentNode.parentNode; //通过remove来进行删除 tr.remove(); } 修改 首先通过cells获取到单元格的一个数组，将单元格每一个值赋值input中的value，可以在input元素中进行修改，修改之后再将每一个value赋值给td中，让它实现在table表格中
动态表格制作：PHP与JS结合技巧
- 使用JavaScript可以实现在客户端动态添加、删除或修改表格行。例如，在描述中提到的`addRow()`函数，通过`document.createElement()`方法创建新的`<tr>`元素，然后为每一列创建`<td>`元素，并在其中插入输入框`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值