zoukankan      html  css  js  c++  java

  • JavaScript -- 控制table的创建 与 删除, 排序, 表格颜色

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="table1.css" />
<script type="text/javascript">

function createTab(src)
{
	var row = document.getElementsByName("rows")[0].value;
	var col = document.getElementsByName("cols")[0].value;
	
	if(row=="" || col=="")
		return;

	var tabNode = document.createElement("table");
	
	for(var i=0; i<row; i++)
	{
		var trNode = tabNode.insertRow();
		for(var j=0; j<col; j++)
		{
			var tdNode = trNode.insertCell();
			tdNode.innerHTML = "<input type='button' value='按键"+ i + j +"'  />"
		}	
	}
		
	var divNode = document.getElementsByTagName("div")[0];
	divNode.appendChild(tabNode);
	event.srcElement.disabled = true; 
}

function deleteTab(src)
{
	var tabNode = document.getElementsByTagName("table")[0];
	var row = document.getElementsByName("row")[0].value;
	var col = document.getElementsByName("col")[0].value;
	
	//alert(tabNode.nodeName + row + col);
	if(tabNode==null)
	{		
		alert("没有创建表格");
		return;
	}
	
	if(row!="" && row<tabNode.rows.length)
	{		
		tabNode.deleteRow(row);
		return;
	}
			
	if(col!="" && col<tabNode.rows[0].cells.length)
	{
		var trNodes = document.getElementsByTagName("tr");
		for(var k=0; k<trNodes.length; k++)
		{
			trNodes[k].deleteCell(col);
		}
		return;		
	}
	
	alert("输入的行列数有误");
}

</script>

</head>

<body>

<input type="button" value="一个按钮创建表格" onclick="createTab(this)" /> 
<input type="button" value="删除表格的行列" onclick="deleteTab(this)" /><br />
行：<input type="text" name="rows" />  列:<input type="text" name="cols"  /> <br />
删除行：<input type="text" name="row" />  删除列:<input type="text" name="col"  /> <br />
<div>
	
</div>

</body>
</html>


     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="table1.css" />
<title>无标题文档</title>

<script type="text/javascript">

var flag = true;
function sortTab(src)
{
	var tabNode = document.getElementsByTagName("table")[0];
	var rows = tabNode.rows;	
	
	var arr = new Array();	
	for(var i=1; i<rows.length; i++)
	{
		arr[i-1] = rows[i];  //将 表格行的引用 放入数组
	}
	
	sortt(arr);
	
	var tbNode = tabNode.childNodes[0];
	
	if(flag)  //正反排序
	{
		for(var j=0; j<arr.length; j++)
		{
			tbNode.appendChild(arr[j]);
		}
		flag =false;
	}
	else
	{
		for(var j=arr.length-1; j>=0; j--)
		{
			tbNode.appendChild(arr[j]);
		}
		flag =trues;
	}
	
}

function sortt(arr) //冒泡排序
{
	for(var x=0; x<arr.length; x++)
	{
		for(var y=x+1; y<arr.length; y++)
		{
			if(parseInt(arr[x].cells[2].innerText) > parseInt(arr[y].cells[2].innerText))
			{
				var temp = arr[x];
				arr[x] = arr[y];
				arr[y] = temp;
			}
		}
	}
}

</script>

</head>

<body>

<div>
<table>
	<tr>
		<th>姓名</th>
		<th>地址</th>
		<th><a href="javascript:void(0)" onclick="sortTab(this)"> 年龄</a></th>
	</tr>
	
	<tr>
		<td>张三</td>
		<td>上海</td>
		<td>6</td>
	</tr>
	
	<tr>
		<td>张三</td>
		<td>上海</td>
		<td>49</td>
	</tr>
	
	<tr>
		<td>李四</td>
		<td>长沙</td>
		<td>30</td>
	</tr>
	
	<tr>
		<td>王五</td>
		<td>北京</td>
		<td>22</td>
	</tr>
	
	<tr>
		<td>王五</td>
		<td>北京</td>
		<td>11</td>
	</tr>
	
</table>	
</div>

</body>
</html>


    表格颜色， 鼠标放上加亮显示

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="table1.css" />
<title>无标题文档</title>

<style type="text/css">
.one{
	background-color:#CC99FF;
}	
.two{
	background-color:#00FFFF;
}
.over{
	background-color:#FFFFFF;
}
		
</style>

<script type="text/javascript">

var classname="";	
function colorTab()
{
	var tabNode = document.getElementsByTagName("table")[0];
	var rows = tabNode.rows;
	for(var i=1; i<rows.length; i++)
	{
		if(i%2==1)		
			rows[i].className = "one";
		else
			rows[i].className = "two";		
				
		rows[i].onmouseover = function()
		{
			classname = this.className;			
			this.className = "over";
		}		
		rows[i].onmouseout = function()
		{
			this.className = classname;
		}			
	}
}

window.onload = colorTab;

</script>

</head>

<body>

<div>
<table>
	<tr>
		<th>姓名</th>
		<th>地址</th>
		<th><a href="javascript:void(0)" onclick="colorTab(this)"> 年龄</a></th>
	</tr>
	
	<tr>
		<td>张三</td>
		<td>上海</td>
		<td>6</td>
	</tr>
	
	<tr>
		<td>张三</td>
		<td>上海</td>
		<td>49</td>
	</tr>
	
	<tr>
		<td>李四</td>
		<td>长沙</td>
		<td>30</td>
	</tr>
	
	<tr>
		<td>王五</td>
		<td>北京</td>
		<td>22</td>
	</tr>
	
	<tr>
		<td>王五</td>
		<td>北京</td>
		<td>11</td>
	</tr>
	
</table>	
</div>

</body>
</html>


     
  • 相关阅读:
    jsonrpc
    第十章：多线程
    第九章：IO流
    第八章：集合
    第七章：常用类
    第六章：异常机制
    第四章：数组
    第三章：流程控制语句
    第二章：数据类型和运算符
    第五章：面向对象4
  • 原文地址：https://www.cnblogs.com/xj626852095/p/3648053.html
Copyright © 2011-2022 走看看