DHTML-----表格的创建和样式

最新推荐文章于 2019-07-27 05:20:40 发布
最新推荐文章于 2019-07-27 05:20:40 发布
阅读量761 收藏
点赞数
分类专栏： 网页制作 web前端知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjian_an/article/details/51699028
版权

一、表格的创建、删除

给定表格的行列，实现创建，修改和，删除功能

<!DOCTYPE html>
<html>
  <head>
    <title>DHTML技术演示</title>
		<style type="text/css">
			table{
				border-collapse:collapse;
				color#ff0080;
				width:800px;
			}
			table td{
				border:#0000ff 1px solid;
				text-align:center;
			}
		</style>
    
      <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
	<!--添加-->
    <input type="button" value="创建一行" οnclick="creatTable()">
    <input type="button" value="创建多行表格" οnclick="creatTable2()">
	<hr/>
	行数<input type="text" name="rowNum"  >  
	列数<input type="text" name="colNum"  >
	<input type="button" value="创建" οnclick="creatTable3()">
	<h3>删除前面由用户指定行列号方式创建的表格</h3> <br/>
	行号<input type="text" name="delRowNum"  >  
	<input type="button" value="删除行" οnclick="delRow()">
	列号<input type="text" name="delColNum" >
	<input type="button" value="删除行" οnclick="delCol()">
	<div>
	</div>
  </body>
  	<script type="text/javascript">
  		function creatTable(){
			var oTableNode=document.createElement("table");//创建表格对象
			var oTrNode=oTableNode.insertRow();//创建行对象
			var oTdNode=oTrNode.insertCell();//创建单元格
			oTdNode.innerHTML="内容";
			document.getElementsByTagName("div")[0].appendChild(oTableNode);
		}
		function creatTable2(){
			var oTableNode=document.createElement("table");//创建表格对象
			for(var i=0;i<8;i++){
				var oTrNode=oTableNode.insertRow();//创建行对象
					for(var j=0;j<5;j++){
					var oTdNode=oTrNode.insertCell();//创建单元格
					oTdNode.innerHTML=(i+1)+"行"+(j+1)+"列";
				}
			}
			document.getElementsByTagName("div")[0].appendChild(oTableNode);
		}
		//用户自定义行号与列号的方式创建表格
		function creatTable3(){
			var oTableNode=document.createElement("table");//创建表格对象
			//添加属性
			oTableNode.setAttribute("id","tableId");//这种利用方法更好
			//由用户指定行数与列数的表格
			//获取用户输入的行数与列数
			var rowNum=parseInt(document.getElementsByName("rowNum")[0].value);
			var colNum=parseInt(document.getElementsByName("colNum")[0].value);
			//防护
			if(isNaN(rowNum)||rowNum<=0||isNaN(colNum)||colNum<=0){
				alert("请输入大于0的整数");
				return;
			}
			for(var i=0;i<rowNum;i++){
				var oTrNode=oTableNode.insertRow();//创建行对象
					for(var j=0;j<colNum;j++){
					var oTdNode=oTrNode.insertCell();//创建单元格
					oTdNode.innerHTML="第"+(i+1)+"行"+"第"+(j+1)+"列";
				}
			}
			document.getElementsByTagName("div")[0].appendChild(oTableNode);
			document.getElementsByTagName("div")[0].innerHTML+="<hr/>";
		}
		//删除指定的行,列
		function delRow(){
			var oTableNode=document.getElementById("tableId");
			//防护
			if(oTableNode==null){
				alert("表格不存在");
				return;
			}
			//删除行的处理代码
			//获取用户输入的行号
			var delRowNum=parseInt(document.getElementsByName("delRowNum")[0].value);
			//行防护
			if(isNaN(delRowNum)){
				alert("行号必须是数字");
				return;
			}
			if(!(delRowNum>0&&delRowNum<=oTableNode.getElementsByTagName("tbody")[0].getElementsByTagName("tr").length)){
				alert("改行不存在");
				return;
			}
			//删除行
			oTableNode.deleteRow(delRowNum-1);
		}
		//删除指定的列
		function delCol(){
			var oTableNode=document.getElementById("tableId");
			//防护
			if(oTableNode==null){
				alert("表格不存在");
				return;
			}
			//删除列的处理代码
			//获取用户输入的列号
			var delColNum=parseInt(document.getElementsByName("delColNum")[0].value);
			//列防护
			if(isNaN(delColNum)){
				alert("列号必须是数字");
				return;
			}
			
			if(!(delColNum>0&&delColNum<=oTableNode.rows[0].cells.length)){
				alert("改列不存在");
				return;
			}
			//删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
			for(var x=0;x<oTableNode.rows.length;x++){
				oTableNode.rows[x].deleteCell(delColNum-1);
			}
		}
  	</script>
</html>

二、表格的DIV样式（间隔显示，高亮、排序） 

<!DOCTYPE html>
<html>
  <head>
    <title>tableSytle.html</title>
    <style type="text/css">
    	@import url(1.css);
		.one{
			background-color:#ff8040;
		}
		.two{
			color:#8000ff;
		}
		.over{
			background-color:#ffff00;
		}
    </style>
    

  </head>
  
  <body>
    	<table id="table">
    		<caption>湖南城市学院</caption>
		<tr><th> 姓名</th> <th> <a href="javascript:void(0);" οnclick="sortMethod(this);">年龄</a></th> <th> 地址</th> </tr>
		<tr><td> 张三</td> <td> 30</td> <td> 湖南长沙</td> </tr>
		<tr><td> Tom</td> <td> 10</td> <td> 湖南长沙</td> </tr>
		<tr><td> 李四</td> <td> 2</td> <td> 湖南长沙</td> </tr>
		<tr><td> 杰克</td> <td> 23</td> <td> 湖南长沙</td> </tr>
		<tr><td> Jack</td> <td> 26</td> <td> 湖南长沙</td> </tr>
		<tr><td> wang</td> <td> 21</td> <td> 湖南长沙</td> </tr>
		<tr><td> 王建安</td> <td> 26</td> <td> 湖南长沙</td> </tr>
    	</table>
  </body>
  <script type="text/javascript">
  	var i;
  		function trColor(){
			var oTableNode=document.getElementById("table");
			var cells=parseInt(oTableNode.rows[0].cells.length)*parseInt(oTableNode.rows.length);
			var count=0;
			
			while(count<cells){
				for(i=0;i<oTableNode.rows.length;i++){
					for(var j=0;j<oTableNode.rows[0].cells.length;j++){
						if(((count++)%4)==0){
							oTableNode.rows[i].cells[j].style.fontSize="23px";
						}else{
							oTableNode.rows[i].cells[j].style.fontStyle="italic";
						}
					}
				}
			}
			for(i=0;i<oTableNode.rows.length;i++){
				if((i&1)==0){//相同为1不同为0
					oTableNode.rows[i].className="one";
				}else{
					oTableNode.rows[i].className="two";
				}
				var oldClassName;
				oTableNode.rows[i].οnmοuseοver=function(){
					oldClassName=this.className;
					//oTableNode.rows[i].className="over";
					//alert( i+" "+oTableNode.rows[i-1].className);//i=oTableNode.rows.length进不去
					this.className="over";
				}
				oTableNode.rows[i].οnmοuseοut=function(){
					this.className=	oldClassName;
				}
			}
		}
		 
		//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
	    onload = function(){
			trColor();
			//还可以在这里写其它代码，甚至调用其它函数
		};//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行，而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
 		var flag=true;
		function sortMethod(aNode){
		//	alert(this);//windows
			var oTableNode=document.getElementById("table");
			var oTrNodes=[];
			for(var i=1;i<oTableNode.rows.length;i++){
				oTrNodes[i-1]=oTableNode.rows[i];
			}
			mySortMinTOMax(oTrNodes);
			if(flag){
				for(var x=0;x<oTrNodes.length;x++){
					oTrNodes[x].parentNode.appendChild(oTrNodes[x]);
				}
				aNode.innerText="年龄↑";
			}else{
				for(var x=oTrNodes.length-1;x>=0;x--){
					oTrNodes[x].parentNode.appendChild(oTrNodes[x]);
				}
				aNode.innerText="年龄↓";
			}
			flag=!flag;
			//下面这张可以，但不简便
			/*if((oTableNode.rows[0].cells[1].innerText=="年龄")||(oTableNode.rows[0].cells[1].innerText=="年龄↓")){
				mySortMinTOMax(oTrNodes);
				oTableNode.rows[0].cells[1].innerHTML="<td><a href='javascript:void(0);' οnclick='sortMethod();'>年龄↑</a></td>";

			}else{
				mySortMaxTOMin(oTrNodes);
				oTableNode.rows[0].cells[1].innerHTML ="<td><a href='javascript:void(0);' οnclick='sortMethod();'>年龄↓</a></td>";
			}
			for(var i=0;i<oTrNodes.length;i++){
				oTrNodes[i].parentNode.appendChild(oTrNodes[i]);//覆盖方法
			}*/
			trColor();
		}
		function mySortMinTOMax(arr){
			for(var x=0;x<arr.length-1;x++){
				for(var y=x+1;y<arr.length;y++){
					if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
						var temp = arr[x];
						arr[x] = arr[y];
						arr[y] = temp;
					}
				}
			}
		}
		function mySortMaxTOMin(arr){
			for(var x=0;x<arr.length-1;x++){
				for(var y=x+1;y<arr.length;y++){
					if(parseInt(arr[x].cells[1].innerText) < parseInt(arr[y].cells[1].innerText)){
						var temp = arr[x];
						arr[x] = arr[y];
						arr[y] = temp;
					}
				}
			}
		}
  </script>
</html>


wangjian_an
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TreeGrid DHTML的表格控件
04-19
TreeGrid是一个DHTML的表格控件，它完全使用JavaScript语言编写，用以实现HTML页面上的table, grid, tree view 或者 grid with tree里的数据地展示和编辑。EJS TreeGrid还提供了强大的甘特图功能，能够满足您把项目进度管理以图表的形式直观地展示出来。
dhtml-suite-for-applications v1.9 最新版
12-22
dhtml-suite-for-applications v1.9正是这样一个专门用于创建应用程序的JavaScript套件，它以其强大的功能和易用性，在众多开发者中广受好评。本文将全面探讨这个版本的特性、功能及其在实际开发中的应用。 首先，...
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
weixin_33834679的博客
06-20 114
一：用最底层的方式，该方式用来创建别的对象树也可以 代码演示： <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式，其实该方式用来创建别的对象树也可以</title> <meta http-equiv="con...
DHTML(Dynamic HTML)--1表格的增删改
Dragon_Dai_2017的博客
08-31 336
利用DHTML中提供的一些方法来进行表格的增删改 1.table对象中的方法 createCaption 在表格中创建空的 caption 元素。  createTFoot 在表格中创建空的 tFoot 元素。  createTHead 在表格中创建空的 tHead 元素。  eleteCaption 从表格中删除 caption 元素及其内容。  ##deleteRow 从表格及 r
DHTML实现表格的增加和删除
clarancepeng
07-04 118
xml 代码 &lt;html&gt;   &lt;head&gt;   &lt;/head&gt;   &lt;body&gt;   &lt;p&gt;this is a dhtml demo!!!&lt;/p&gt;   &lt;form name='testForm'&gt;   &lt;input type='check
DHTML技术演示---动态创建表格、删除表格（详细的解释，适合初学者）
weixin_37720904的博客
05-13 534
详细的演示了，创建单个单元格的表格，创建固定行固定列数的表格、创建用户输入个数的行数。列数表格、删除行、删除列。 图形界面如下（不是很好看，但是技术点都有适合初学者，有详细的解释）
操作DHTML表格的VC 报表实例.rar
07-10
通过研究这些源代码，你可以看到具体是如何在VC++中实现上述操作的，包括如何创建和控制`WebBrowser`控件，如何与DHTML表格进行交互，以及如何处理数据和事件。 总之，通过结合VC++和DHTML表格，我们可以构建出功能...
在VC 下处理DHTML文件中的表格对象.rar
07-10
启程报表模块是程序的主体部分，它通常包含一系列的函数和方法，用于创建、编辑和展示DHTML表格。这包括但不限于添加、删除表格行和列，设置单元格样式，以及处理表格内的数据绑定。在VC++中，这可能涉及到对ActiveX...
DHTML中文手册-chm版
08-08
这包括各种标签的用法，如`<html>`、`<head>`、`<body>`、`<div>`、`<p>`等，以及如何设置文本样式、链接、图像和表格。 2. **CSS样式表**：CSS用于控制网页的布局和外观。手册会讲解选择器的使用、属性的设置，如...
TouTouJS-开源
04-25
它们通常包括但不限于按钮、表格、下拉菜单、对话框等组件，且这些组件通常已经封装好了一套完整的事件处理机制和样式控制，使得开发者无需深入底层细节，即可快速构建功能丰富的网页元素。 "开源软件"标签表明了...
Dhtml动态插入删除表格实例
04-20
插入删除表格，用javascript实现，动态增加行和删除行，很简单。
html5-3D旋转文字或图片
02-02
有TABLE SPHERE HELIX GRID 4种特效，可供切换，html5-3D旋转文字或图片
DHTML动态创建一个弹出遮罩层
weixin_30617737的博客
07-27 78
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><script language="javascript">functio...
DHTML 大全
helanye的专栏
07-11 3652
方法add向 areas, controlRange 或 options 集合中添加一个元素。add创建一个新的 namespace 对象并将其添加到集合中。addBehavior给元素附加一个行为。AddChannel显示一个对话框，答应用户输入指定的频道，或当已安装时更改频道的 URL。AddDesktopCo
DHTML，Tabledo 使用案例和注意
m0_37596145的博客
10-22 848
案例 <script type="text/javascr强调内容ipt" src="${ctx}/js/tabledo.js"></script> <script language="JavaScript"> $(document).ready(function(){ ${mRecordData} //发送ajax请求-------------
DHTML技术演示---动态设置表格行间隔显示、表格排序、鼠标悬停样式改变
weixin_37720904的博客
05-14 479
表格行间隔显示，如图 点击年龄会对表格排序，类似Excel ,再点一下就对表格就年龄倒序 主要用了一下几个方法 cells 获取表格行或整个表格中所有单元格的集合。 代码如下，有详细解释 和步骤<!DOCTYPE html> <html> <head> <title>table2.html</title> <meta http-equiv="keywords" c
dhtmlx使用翻译（二） dhtmlxgrid 配置部分
刀光剑影
06-21 5522
1.1.1                      detachHeader(index)版本：大众版参数：index 表头索引用途：删除grid的某个表头，与attachHeader配对使用参考实例：无 1.1.2                      enableAutoHeight(mode,maxHeight, countFullHeight)版本：大众版参数：mode: true/falsemaxHeight: 最大无滚动高度，默认为无限制countFullHeight: 最大高度计算
DHTMLX 表格组件(dhtmlxGrid )使用介绍
热门推荐
herb777的专栏
03-01 1万+
String sql = select {s.*} from t_student s where s.age22; SQLQuery slqQuery = session.createSQLQuery(sql); sqlQuery.addEntity(s, Student.class); List list = sqlQuery.list(); for (int i=0;list.size();i
用Js，DHTML控制表格的某一列的显示与隐藏
menghuannvxia的专栏
01-10 4632
New  Document      New  Document    //初始化时一定要隐一列 function  initHide(cell) {         obj  =  document.getElementById("showTb");         for(i=0;i    
第讲-css动态网站制作优秀文档.ppt
最新发布
11-14
W3C把DHTML（Dynamic HTML）分为三个部分来实现：脚本语言（包括JavaScript、VBScript等）、支持动态效果的浏览器（包括Internet Explorer、Netscape Navigator等）和CSS样式表。 二、CSS语法 CSS的定义是由三个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值