JavaScript DOM操作之表格操作(2)

最新推荐文章于 2020-11-12 14:01:37 发布
最新推荐文章于 2020-11-12 14:01:37 发布
阅读量342 收藏
点赞数
分类专栏： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014661569/article/details/45912691
版权
/**
*DOM操作表格--(添加删除元素)
*是在tBodies里面添加元素

*/


HTML文件代码


<!DOCTYPE html>
<html>
  <head>
    <title>domTableOperate.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/domTableOperate.js"></script>
  </head>
  <body>

NAME:<input type="text" id="name" width="300px" style="margin-top:50px;">
  AGE:<input type="text" id="age">
  <input type="button" value="ADDRow" id="btn"><br/>
    <table  border="1" width="500px;" id="tab1">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>
    </table>

   </body>

</html>



js文件代码


window.onload = function(){

var table1 = document.getElementById('tab1');
    var name = document.getElementById('name');
    var age = document.getElementById('age');
    var btn = document.getElementById('btn');
    var id = table1.tBodies[0].rows.length+1;
    btn.onclick = function(){
    if(name.value.length> 0 && age.value.length> 0){ 
    var otr =  document.createElement('tr');
   
    var otd = document.createElement('td');
    otd.innerHTML = id++;
    otr.appendChild(otd);
   
    var otd = document.createElement('td');
    otd.innerHTML = name.value;
    otr.appendChild(otd);
   
    var otd = document.createElement('td');
    otd.innerHTML = age.value;
    otr.appendChild(otd);
   
    var otd = document.createElement('td');
    otd.innerHTML = '<a href="javascript:;">remove</a>';
    otr.appendChild(otd);
   
    otd.getElementsByTagName('a')[0].onclick = function(){
    table1.tBodies[0].removeChild(this.parentNode.parentNode);
    }
   
    table1.tBodies[0].appendChild(otr);
    age.value = '';
    name.value = '';
    }else{
    alert("Please fill in NAME and AGE!");
    }
    };

}

----Neal----
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM操作表格及样式
10-24
主要介绍了JavaScript DOM操作表格及样式,需要的朋友可以参考下
JavaScript表格常用操作方法汇总
10-24
创建表格通常通过`<table>`标签来实现，但在JavaScript中，我们可以通过DOM操作动态创建。例如，我们可以创建一个名为`CTable`的构造函数，接受表格ID和行数作为参数。`CTable`构造函数会查找指定ID的表格元素，并...
【JavaScript】DOM操作表格
weixin_34416649的博客
08-26 173
DOM操作表格 1.利用JavaScript动态增加、删除表格内容页面如图 注:首先说个小问题，有些如制定按钮点击事件的js代码，放在html文档最后可以，放在最前面(<head>标签内)不可以，原因是html文档是自上往下读取，当读到最上面的js、代码时，并没有读取相应的DOM标签，所以制定的按钮功能没有效果，如果非要放在上面，可以指...
第一百一十五节，JavaScript，DOM操作表格
weixin_34289454的博客
11-26 122
JavaScript，DOM操作表格   学习要点： 1.操作表格 DOM在操作生成HTML上，还是比较简明的。不过，由于浏览器总是存在兼容和陷阱，导致最终的操作就不是那么简单方便了。本章主要了解一下DOM操作表格和样式的一些知识。 一．操作表格 &lt;table&gt;标签是HTML中结构最为复杂的一个，我们可以通过DOM来创建生成它，或者HTML DOM来操作它。(PS：HTML DOM提供...
第二十一章：DOM 操作表格及样式
chaoyv
11-27 162
学习要点：1.操作表格2.操作样式 DOM 在操作生成 HTML 上， 还是比较简明的。 不过， 由于浏览器总是存在兼容和陷阱，导致最终的操作就不是那么简单方便了。 本章主要了解一下 DOM 操作表格和样式的一些知识。一．操作表格&lt;table&gt;标签是 HTML 中结构最为复杂的一个，我们可以通过 DOM 来创建生成它，或者 HTML DOM 来操作它。(PS：HTML DOM 提...
笔记——document.createElement创建添加属性
shiki0083的笔记
05-16 3万+
动态添加div中，需要进行添加id，class，style等属性做下记录[javascript] view plain copyvar div = document.createElement('div');  div.id = 'mask_div1';  div.className = 'mask';  div.appendChild(document.createTextNode("test"...
js HTML中表格的增加和删除
liuzong_dage的博客
11-10 3031
&lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;&lt;/title&gt;     &lt;script type="text/javascript"&gt;         window.onload=function(){             var otx1=document.getElementBy
JavaScript DOM操作表格案例
侯春强的博客
10-14 660
使用DOM创建表格 方式一：（JavaScript DOM创建表格） Title #outer { width: 500px; height: 500px; margin: auto; } onload = functio
javascript操作表格
12-09
在实际开发中，JavaScript操作表格通常涉及到DOM（Document Object Model）操作，例如`document.getElementById()`、`innerHTML`属性、`appendChild()`、`removeChild()`等方法。此外，为了提供更好的用户体验，可能...
JavaScript与DOM组合动态创建表格实例
10-27
简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们;你可以学到如何动态地创建、获取、控制和删除HTML元素
jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作
热门推荐
杨明金的博客
11-12 22万+
查看本章节 查看作业目录 需求说明： 在 jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作 点击“增加”超链接时，将表格中的第一条数据添加到表格的末尾 在输入框中输入 ID 号，点击“查询”超链接，表格将过滤出指定 ID 号的数据 点击每行对应的“删除”超链接，将删除对应行的数据 点击每行对应的“修改”超链接，ID、姓名和薪水变为可编辑状态，“修改”超链接变为“保存”，点击“保存”超链接，修改后的数据将被保存并显示 实现思路： 在页面中添加”增加”超链接、文本
js表格（创建，换色，点击）
liu904139492的专栏
04-09 761
function aa() {  var table = document.createElement("table");  table.border="1";  var tbody = document.createElement("tbody"); //row1  var tr = document.createElement("tr");  var td = document.
js在指定tr后面添加tr
凌晨de太阳
08-27 1万+
方法（1）此方法不能在制定的位置添加       "javascript">   var table = document.getElementById("table_id");  var tr = table.insertRow();  for(var i=0; i  var td = tr.insertCell(i);    td.innerText = i;  }      "t
js表格中的DOM操作之添加、删除行
慵懒的猫
10-14 7601
功能实现：1、实现表格添加一行 2、实现表格删除当前行 步骤：1、根据表格id获取当前表格 2、获取表格中的tBody(Bodies[0]) 3、为添加按钮增加click事件，为tBody创建子节点添加 4、为当前行的a元素增加click事件，删除本行 注意点：1、添加一行时，生成序号的获取 2、删除时，获取a元素，添加事件
udp分片报文pcap文件
07-18
udp分片报文pcap文件：64kudp大包分成每片658字节总计100片
计算机教学导案.doc
07-18
计算机
摩根：2024年大市前瞻.pdf
最新发布
07-18
摩根：2024年大市前瞻
计算机控制专业技术专题实习任务书温度控制.doc
07-18
计算机
计算机控制系统.doc
07-18
计算机
javascript dom操作表格
04-06
JavaScript DOM操作表格是指使用JavaScript操作HTML文档中的表格元素，包括获取表格数据、修改表格样式、添加或删除表格行列等操作。通过使用DOM方法和属性，可以轻松地实现对表格的各种操作，提高页面交互、动态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值