JS操作页面表格内容的添加与删除

最新推荐文章于 2023-11-30 09:18:07 发布
最新推荐文章于 2023-11-30 09:18:07 发布
阅读量1k 收藏
点赞数
分类专栏： JS 
<html>
	<head>
		<title>HTML DOM</title>
		<script type="text/javascript">
			//定义一个删除一行信息函数
			function doDel(bt){
				document.getElementById("tid").deleteRow(bt.parentNode.parentNode.rowIndex);
			}
			
			function doAdd(myform){
				//获取要添加的信息
				var id=myform.id.value;
				var name=myform.name.value;
				var age=myform.age.value;
				var sex=myform.sex.value;
				
				//获取表格节点对象
				var tid = document.getElementById("tid");
				
				//添加一行,返回新的行节点对象
				var row = tid.insertRow(tid.rows.length);
				
				//在行对象中添加一个个td节点
				row.insertCell(0).innerHTML=id;
				row.insertCell(1).innerHTML=name;
				row.insertCell(2).innerHTML=age;
				row.insertCell(3).innerHTML=sex;
				row.insertCell(4).innerHTML="<button οnclick=\"doDel(this)\">删除</button>";
	
				return false;
			}
		</script>	
	</head>
	<body>
		<!-- html注释 -->
		<h2 style="color:red">使用HTML的DOM操作来操作HTML标签</h2>
		<table id="tid" width="400" border="1">
		<thead>
			<tr>
				<th>Id号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody id="mytable">
			<tr>
				<td>1001</td>
				<td>张三</td>
				<td>20</td>
				<td>男</td>
				<td><button οnclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1002</td>
				<td>李四</td>
				<td>20</td>
				<td>男</td>
				<td><button οnclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1003</td>
				<td>王五</td>
				<td>20</td>
				<td>男</td>
				<td><button οnclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1004</td>
				<td>赵六</td>
				<td>20</td>
				<td>男</td>
				<td><button οnclick="doDel(this)">删除</button></td>
			</tr><tr>
				<td>1005</td>
				<td>田七</td>
				<td>20</td>
				<td>男</td>
				<td><button οnclick="doDel(this)">删除</button></td>
				</tr>
		</tbody>
		</table>
		
		<br/><br/>
		<form action="a.php" οnsubmit="return doAdd(this);">
			学号:<input type="text" name="id" /> <br/><br/>
			姓名:<input type="text" name="name" /> <br/><br/>
			年龄:<input type="text" name="age" /> <br/><br/>
			性别:<input type="text" name="sex" /> <br/><br/>
			<input type="submit" value="添加"/>
		</form>
		
		<a href="2.html">2.html</a>
		<a href="javascript:window.history.forward()">前进</a>
		<a href="javascript:window.history.go(1)">前进</a>
	</body>
</html>

梦康
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript小技巧——添加表格内容
风中小雨人
04-13 399
javascript测试 var i = 0; function addRow(){ i++; //在第i行下添加一行 var tbd = tbr.insertRow(i); //在tbd这一行上添加两个个单元格 var newtd = tbd.insertCell(); var newtd2= tbd.insertCe
用javascript实现网页中表格的行的添加与删除
ssisse的博客
04-19 1523
制作一个表格，显示班级的学生信息。要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 new document window.onload = function(){
JS操作表，增加行，删除行
子龍的专栏
07-08 841
Adding and Removing Rows from a table using DHTML and JavaScript function addRow() { var newRow = document.all("tblGrid")
js技巧之清除表单所有内容
睡懒觉的程序员
01-03 235
/*清空使区域中的表单*/    //isHid 1清除hidden  0不清除hidden    function cinput(areaqy,isHid){    if(isHid == null){        isHid = 1;    }    try{       var table       if(areaqy==undefined||areaqy==""||areaqy==n...
jquery学习之1.22-小练习5-实现添加页面上填写信息到当前页面表格中
weixin_30594001的博客
03-30 120
效果图： 实现代码： 1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html&gt...
JS实现动态表格的添加，修改，删除功能(推荐)
10-22
在JavaScript中，动态创建、编辑和删除表格是常见的任务，特别是在网页交互和数据展示中。以下是如何使用JS实现动态表格的添加、修改和删除功能。 首先，我们需要在HTML页面中设置一个基本的表格结构。例如，给定的...
javascript实现表格添加删除等操作
03-26
- **创建新行**：要向表格添加行，首先需要创建一个新的`<tr>`元素，然后创建`<td>`元素并设置其内容。最后，将这些元素添加到表格的`<tbody>`标签内。 - **删除行**：通过获取行的引用（例如，通过点击事件的`...
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
js 添加删除表格
03-06
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
js实现动态添加删除表格数据的两种方式
最新发布
m0_56713342的博客
11-30 1515
思路：先把整体的html结构写出来，table表格分为3部分，其中tbody中的内容通过节点创建出来，删除时，找到其祖先元素的节点进行remove（），表单内的各个框的值对应表格的内容。思路：先把整体的效果图写出来，再通过js渲染到页面上，每次添加一组数据就相当于给数组添加数据，删除事件用事件委托，给祖先元素绑定事件，子元素触发事件会冒泡到祖先元素。
js表格特效
mischen520的博客
07-07 575
js表格特效 Title function add(){ var tbody=$("#tr1").parentNode; var userId=$("#userId").value; var userName=$("#userName").value;
js在table中添加tr，删除最后一个tr
幼儿园大班扛把子
09-11 5917
function addTable(){     var oTab = document.getElementById('tables');     var oTr = document.createElement('tr');     //创建TR     oTr.innerHTML="&lt;tr&gt;&lt;td&gt;&lt;input type=\"text\" name=\"dat...
js节点对象操作--------输入个人信息加载表格中并实现删除功能
weixin_44483970的博客
01-24 358
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; a{text-decora
js实现表格添加信息
woyaodangxiaodi的博客
12-21 771
js、表格添加信息
动态的把数据显示在table中，点击某一行的删除按钮实现该行的删除（通过ajax实现页面的无刷新加载）
热门推荐
qq_25203209的博客
06-17 1万+
当点击删除按钮是调用deletes()方法。并把删除列的id号作为参数传入。在该方法中调用confirm()实现弹窗效果。。。。。。。
用户信息的添加与删除
IT666DHW的博客
10-13 923
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 用户信息的添加与删除 <script type="text/javascript" sr
html 中的tr th td
thebesttome的专栏
10-18 4027
转帖地址：http://www.jzxue.com/wangyesheji/html/201104/26-7274.html 表格是html中经常使用到的，简单的使用可能很多人都没问题，但是更深入的了解的人恐怕不多，下面我们先来看一下如何使用。 是的上层标签 必须在一个里面
JQuery实现网页表格动态增加与删除内容
05-25
JQuery是一个JavaScript库，可以用它来方便地操作HTML元素。以下是一个简单的示例，演示如何使用JQuery实现网页表格动态增加和删除内容。 首先，我们需要在HTML文件中引入JQuery库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 然后，我们可以在HTML文件中创建一个空的表格，并为其添加一个按钮，用于动态增加表格行： ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> </tbody> </table> <button id="addRowBtn">Add Row</button> ``` 接下来，我们可以使用以下JQuery代码来实现动态增加表格行的功能： ```javascript $(document).ready(function() { // 给按钮添加点击事件 $('#addRowBtn').click(function() { // 创建一个新的表格行 var newRow = $('<tr>'); // 创建三个新的表格单元格，并为其添加数据 var nameCell = $('<td>').text('New Name'); var ageCell = $('<td>').text('New Age'); var genderCell = $('<td>').text('New Gender'); // 将这些单元格添加到新的表格行中 newRow.append(nameCell); newRow.append(ageCell); newRow.append(genderCell); // 将新的表格行添加到表格的tbody中 $('#myTable tbody').append(newRow); }); }); ``` 以上代码中，我们首先使用`$(document).ready()`来确保页面加载完毕后再执行代码。然后，我们给按钮添加了一个点击事件，当用户点击按钮时，我们会创建一个新的表格行，并向其中添加三个单元格，然后将新的表格行添加到表格的tbody中。 接下来，我们可以使用以下JQuery代码来实现动态删除表格行的功能： ```javascript $(document).ready(function() { // 给表格行添加点击事件 $('#myTable tbody').on('click', 'tr', function() { // 移除被点击的表格行 $(this).remove(); }); }); ``` 以上代码中，我们使用了JQuery的`on()`方法来为表格的tbody中的所有表格行添加一个点击事件。当用户点击任何一个表格行时，我们会将该表格行从DOM中移除。 综上所述，以上代码演示了如何使用JQuery实现网页表格动态增加和删除内容的功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值