js动态实现表格添加和删除操作

2024-10-03 02:37:12

本文实例为大家分享了js动态实现表格添加和删除的具体代码，供大家参考，具体内容如下

运行效果如图（两种实现方案，被注释的是第一种实现方案）

代码：

<!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;" onclick="delTr(this)"/></td>
    </tr>
    <tr>
     <td>1</td>
     <td>令狐冲</td>
     <td>张无忌</td>
     <td><input type="button" value="删除" style="color: blue;" onclick="delTr(this)" /></td>
    </tr>
    <tr>
     <td>1</td>
     <td>令狐冲</td>
     <td>张无忌</td>
     <td><input type="button" value="删除"style="color: blue;" onclick="delTr(this)"/></td>
    </tr>
   </table>
  </div>
  </div>
 </body>
 <script type="text/javascript">
  // 当点击添加按钮时触发下面的方法
     document.getElementById("add").onclick=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='删除' onclick='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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JS实现动态表格的添加，修改，删除功能(推荐)

1. 首先在页面中配置好一个表格框架 <tr> <td>新增参数:</td> <td class="pn-fcontent"><input type="button" value="选择" onclick="openAppParamsPage();"/></td> <td>参数列表:</td> <td class="
JS小功能(操作Table--动态添加删除表格及数据)实现代码

效果: 代码: 复制代码代码如下: <head runat="server"> <title></title> <style type="text/css"> tr { height: 30px; } </style> <script type="text/javascript">
基于JavaScript实现动态添加删除表格的行

又一个动态控制表格的效果,用JavaScript动态生成表格行.表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能. 1.jsp <table id="viewTabs"> <thead> <tr> <th>产品名称</th> <th>编号</th> <th>数量</th> <th>重量</th> <t
JS/jQuery实现超简单的Table表格添加,删除行功能示例

本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能.分享给大家供大家参考,具体如下: 最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢! 需要的拿去,转载请在明显的位置标注出出处!!! <html> <head> <title>table添加/删除行</title> </head> <body> <t
js实现添加删除表格（两种方法）

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin:0 auto; background:yellow; border:4px double #808080; width:600px; text-alig
js动态添加表格逐行添加、删除、遍历取值的实例代码

关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可. 功能包括:表格添加一行,表格删除一行,表格遍历取值等. 点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响.删除或者添加,每行的的编号都会自动变化,套餐和价格是<input/>,内容是 <textarea></textarea>,点击保存按钮的时候,遍历表
动态添加删除表格行的js实现代码

复制代码代码如下: <html><head><script language="javascript"> //窗口表格增加一行 function addNewRow(){ var tabObj=document.getElementById("myTab");//获取添加数据的表格 var rowsNum = tabObj.rows.length; //获取当前行数 var colsNum=tabObj.row
原生JS和JQuery动态添加、删除表格行的方法

本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
js简单的表格添加行和删除行操作示例

复制代码代码如下: <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(document).ready(fu
JavaScript动态操作表格实例(添加,删除行,列及单元格)

复制代码代码如下: <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>js动态操作表格</title><script language="javascript">function init(){_table=document.getElementByI

js动态实现表格添加和删除操作

相关推荐

随机推荐