JavaScript实现动态的表格效果

最新推荐文章于 2022-09-26 16:49:40 发布

Bird

最新推荐文章于 2022-09-26 16:49:40 发布

阅读量2.5k

点赞数 3

分类专栏： JavaScript 文章标签： javascript button input function html table

本文链接：https://blog.csdn.net/a352193394/article/details/7537502

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在网页的表格效果中，有一种效果是非常漂亮的，就是仅仅使用JavaScript配合HTML完成的网页的表格的动态增加

和减少或者删除的效果，这样的效果能让人感觉到网页的动态效果非常好，以后可以作为一个项目模版拷贝使用。

下面我们就来实现这样的一个简单的效果，主要是根据不同的按钮实现增加表格的一行或者删除表格的一行或者遍历表

格这样的效果。下面请看代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>table.html</title>
	<script type="text/javascript">
		function test(){
			//取出所有行
			var myrows = mytab.rows;
			for(var i = 0; i < myrows.length; i++){
				//取出每一行
				var eachRow = myrows[i].cells;
				
				for(var t=0; t<eachRow.length;t++)
				window.alert(eachRow[t].innerText);
			}
		}
		
		function test2(){
			mytab.deleteRow(1);
		}
		
		function test3(){
			var tableRow = mytab.insertRow(3);
			tableRow.insertCell(0).innerText="3";
			tableRow.insertCell(1).innerText="吴用";
			tableRow.insertCell(2).innerText="智多星";
		}
	</script>
  </head>
  
  <body>
   	<h1>水浒英雄排行榜</h1>
   	<table id="mytab" border="1px">
   		<tr>
   			<td>排名</td>  <td>姓名</td>  <td>外号</td>
   		</tr>
   		
   		<tr>
   			<td>1</td>  <td>宋江</td>  <td>及时雨</td>
   		</tr>
   		
   		<tr>
   			<td>2</td>  <td>卢俊义</td>  <td>玉麒麟</td>
   		</tr>
   	</table>
   	<br/>
   	<input type="button" οnclick="test();" value="testing"/><br/>
   	
   	<input type="button" οnclick="test2();" value="删除一行"/><br/>
   	
   	<input type="button" οnclick="test3();" value="插入一行"/><br/>
  </body>
</html>

其实很简单，这要是对应Table这个对象进行的操作，很多函数这里都没有使用到，具体要求的时候还是需要去查看

文档的，这里只是一个指引。

Bird

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现动态的表格效果

在网页的表格效果中，有一种效果是非常漂亮的，就是仅仅使用JavaScript配合HTML完成的网页的表格的动态增加和减少或者删除的效果，这样的效果能让人感觉到网页的动态效果非常好，以后可以作为一个项目模版拷贝使用。下面我们就来实现这样的一个简单的效果，主要是根据不同的按钮实现增加表格的一行或者删除表格的一行或者遍历表格这样的效果。下面请看代码 table.html
复制链接

扫一扫