CSS+HTML实例集合三，用户自定义创建表格并删除指定行、列，对表格中的数据进行排序，radio单选摁扭之调查问卷、之选择题

最新推荐文章于 2021-06-08 13:28:36 发布

King·Forward

最新推荐文章于 2021-06-08 13:28:36 发布

阅读量3.9k

点赞数

分类专栏： JavaWeb 文章标签： html css table insert button border

本文链接：https://blog.csdn.net/wjw_java_android/article/details/8061536

版权

JavaWeb 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

用户自定义创建表格并删除指定行、列

<!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>
</head>
<style type="text/css">
	table{
	border:#0000FF 1px solid;
	width:600px;
	border-collapse:collapse;/*将表格边框与单元格边框重合*/
	}
	table td{
	border:#99FF00 1px solid;
	padding:30px;/*如果是一个参数，表示上右下左四个方向数据边距都是该参数；
					如果是两个参数，表示上下边距为第一个参数值，左右边距为第二个参数值
					如果是四个参数，分别表示上右下左四个方向的边距*/}
</style>
<body>
<!--
	用户自定义一个5行6列的表格
	
	
-->
<input type="button" name="createTable" value="分解创建表格" οnclick="createTable1()" />
<div id="table_div">

</div>
行：<input type="text"  id="tr"/><br />
列：<input type="text" id="td" />
<input type="button" name="createTable" value="创建指定行列数表格" οnclick="createTable2(this)" />
<div id="divId">

</div>
<hr />
<h1>以下是针对表格删除特定行，特定列的操作</h1>
<hr />
<table id="tableId">
	<tr><td>1---------1</td><td>1---------2</td><td>1---------3</td></tr>
	<tr><td>2---------1</td><td>2---------2</td><td>2---------3</td></tr>
	<tr><td>3---------1</td><td>3---------2</td><td>3---------3</td></tr>
	<tr><td>4---------1</td><td>4---------2</td><td>4---------3</td></tr>
</table>
<input type="text" id="delTr"  /><input type="button" value="删除指定的行" id="delTrButton" οnclick="delTr();" /><br />
<input type="text" id="delTd"  /><input type="button" value="删除指定的列" id="delTdButton" οnclick="delTd();" />
</body>
<script type="text/javascript">
	function createTable1(){
	
		/*
		//分别创建各个标签对象
		var table_=createNode("table");
		var tbody_=createNode("tbody");
		var tr_=createNode("tr");
		var td_=createNode("td");
		//分别添加子对象标签
		table_.appendChild(tbody_);
		tbody_.appendChild(tr_);
		tr_.appendChild(td_);
		上面的方式使用的是document对象中的方式完成的，可以跨浏览器，虽然可以完成相应的操作，但是很繁琐，不建议使用*/
		var table1 = createNode("table");//创建表格对象
		var insert_tr=table1.insertRow();//往表格对象中插入行
		//alert(insert_tr.nodeName);//该insert_tr对象就是tr行对象
		var insert_td=insert_tr.insertCell();//往tr对象中插入单元格，即列
		insert_td.innerHTML="一个单元格";
		//insert_td.innerText="一个单元格";//这两种方式都可以
		//alert(insert_td.nodeName+"---------"+insert_td.innerText);//用来测试的
		
		//document.body.appendChild(table1);//往页面中的body的最后添加本表格，即追加 
		//上面只能追加到body所有元素的后面添加，下面添加到指定位置
		var table_div=document.getElementById("table_div");//获取要添加的位置的对象
		table_div.appendChild(table1);//根据该对象添加表格
	}
	function createNode(nodeName){
		return document.createElement(nodeName);
	}
	
	//以下几个方式就是创建n行n列的方法，当然创建行和列可以用两层for循环搞定，我不过分开写了，你懂的
	var boo=true;
	function createTable2(button){
		button.disabled=true;//把自己置为无效
		alert(button.nodeName);
	
		if(boo){		
			var table=document.createElement("table");
			var tr=document.getElementById("tr");//获取文本输入框对象
			var td=document.getElementById("td");//获取文本输入框对象
			//createTableNum(table,tr.value,td.value);//调用方式一，创建n行n列表格
			createTrTd(table,tr.value,td.value);//调用方式二，创建n行n列表格
			var div=document.getElementById("divId");
			div.appendChild(table);
			boo=false;	//方式一：通过该判断，可以有效控制创建。该置为假，可防止重复创建，可定义函数使其为真即可有效
						//方式二：就是把摁扭置为disabled即可，不能点了
		}else{
			alert("无效");
		}
	}
	
	/*方式一：创建行，列是分开的*/
	var tr;
	function createTableNum(table,trNum,tdNum){
		for(var i=0;i<trNum;i++){
			tr=table.insertRow();//创建行
			createTd(tr,tdNum);//每次创建行，就创建相应的列数
		}
		return table;
	}
	//创建指定个数的单元格
	function createTd(tr,num){
	 
		 for(var i=0;i<num;i++){
		 	var td=tr.insertCell();
			td.innerHTML="aaaa";
		 }
	}
	
	/*方式二：用两层for循环管创建行列*/
	function createTrTd(table,trNum,tdNum){
		for(var i=0;i<trNum;i++){
			var tr=table.insertRow();
			for(var j=0;j<tdNum;j++){
				var td=tr.insertCell();
				td.innerHTML=i+"----"+j;//往单元格中插入数据
			}
		}
	}
	//--------------------------------------以下是对表格进行特定的删除行/列的操作------------------------------------------------------------------------------
	//删除行
	function delTr(){
		var table=document.getElementById("tableId");
		var del_tr=document.getElementById("delTr").value;
		if(del_tr>=1&&del_tr<=table.rows.length){
			table.deleteRow(del_tr-1);//索引是从0开始的
		}else{
			alert("该行不存在，请重新输入");
			return;
		}
	//删除列，没有直接的方法，可以删除没一行中的第n个单元格
	}
	function delTd(){
		var del_td=document.getElementById("delTd").value; 
		var table=document.getElementById("tableId");
		var trs=table.rows;
		if(del_td>=1&&del_td<=trs[0].cells.length){//判断小于等于行中的单元格的数量
			for(var i=0;i<trs.length;i++){
				trs[i].deleteCell(del_td-1);
			}
		}else{
			alert("该列不存在，请重新输入");
			return ;
		}
	}


</script>
</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" />
<title>无标题文档</title>
</head>
<style type="text/css">
	 
	table{
	border:#FF0000 1px solid;
	border-collapse:collapse;/*使表格边框与单元格边框重合*/
	text-align:center;
	width:500px;}
	table td,table th{
	border:#FF0000 1px solid;
	padding:10px}
	
	a:link,a:visited{/*设置连接点击前，点击后样式一致*/
	color:#000000;
	text-decoration:none;/*设置文本的样式为none，即去掉下划线*/}
	a:hover{/*设置当鼠标悬停时的样式*/
	color:#0000FF;}
	 
</style>
<body>
<table id="tableId">
	<tr>
		<th>姓名</th>
		<th><a href="javascript:void(0)" οnclick="sortTable();">年龄</a></th>
		<th>地址</th>
	</tr>
	<tr>
		<td>a</td>
		<td>112</td>
		<td>fjkdlsa;</td>
	</tr>
	<tr>
		<td>b</td>
		<td>12</td>
		<td>fjkdlsa;</td>
	</tr>
	<tr>
		<td>c</td>
		<td>79</td>
		<td>fjkdlsa;</td>
	</tr>
	<tr>
		<td>d</td>
		<td>22</td>
		<td>fjkdlsa;</td>
	</tr>
	<tr>
		<td>e</td>
		<td>62</td>
		<td>fjkdlsa;</td>
	</tr>
</table>
</body>
<script type="text/javascript">
	/*
		对表格中的数据进行排序，方式有很多，这是其中之一
		
		1，定义一个数组存储所有的行的数据
		2，对该数组进行指定数据的排序
		3，把数组中的数据放回表格中即可
	*/
	var boo=true;
	function sortTable(){
		var table=document.getElementById("tableId");//获取表格对象
		var arr=[];//定义数组，用来存储需要排序的行数据
		var rows_tr=table.rows;//获取表格中所有的行
		for(var i=1;i<rows_tr.length;i++){//因为角标从0开始的，因为表头不需要排序，所以从第二行开始
			arr[i-1]=rows_tr[i];
			//alert(rows_tr[i].cells[1].innerHTML);//此时用innerText与innerHTML都可以获取单元格中的值
		}
		sortArr(arr);//进行排序
		if(boo){		
			for(var i=0;i<arr.length;i++){
				//alert(arr[i].cells[1].innerHTML);
				arr[i].parentNode.appendChild(arr[i]);
				//alert(arr[i].cells[1].innerHTML);//分解弹出，看以看出原理
			}
			boo=false;
		}else{
			for(var i=arr.length-1;i>=0;i--){
				//alert(arr[i].cells[1].innerHTML);
				arr[i].parentNode.appendChild(arr[i]);
				//alert(arr[i].cells[1].innerHTML);//分解弹出，看以看出原理
			}
			boo=true;
		}
	}
	function sortArr(arr){
		for(var i=0;i<arr.length;i++){
			for(var j=0;j<arr.length-1;j++){
				if(parseInt(arr[j].cells[1].innerHTML)>parseInt(arr[j+1].cells[1].innerHTML)){//注意这里要把innerHTML转换成int
					var temp=arr[j+1];
					arr[j+1]=arr[j];
					arr[j]=temp;
				}
			}
		}
	}
</script>
</html>

radio单选摁扭之调查问卷、之选择题

<!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>
</head>
<style type="text/css">
	#form{
	display:none;}
	#result1,#result2,#result3,#result4,#result5,#result6{/*组合选择器*/
	display:none;}
	  
</style>

<body>
<!----------------------------------------------单选摁扭控制隐藏显示------------------------------------------------------------------------------------->
	<!--
		演示表单中的组件-单选摁扭
		创建效果：
			1，对调查问卷的是否显示
			2，单选题
	-->
	<div id="infoID">
		<div id="newInfo">
			您是否愿意接受我们提供的最新资讯：
			<!--用label标签把radio和中文封装起来，当点击中文的时候，就会选中radio-->
			<label accesskey="yes"><input id="yes" type="radio" name="radio" value="a" οnclick="info(this)" />是</label>
			<label accesskey="no"><input id="no" type="radio" name="radio" value="b" checked="checked" οnclick="info(this)" />否</label>
		</div>
		<div id="form">
		<form method="post" action="">
			用 户 名：<input type="text" name="userName" /><br />
			邮件地址：<input type="text" name="email" /><br />
			<input type="button" value="提交个人信息" οnclick="method();" />
		</form>
		</div>
	</div>
<!-----------------------------------------------单选摁扭，选择题---------------------------------------------------------------------------------------->
	<hr />
	<h3>测试你的性格</h3>
	<div>请选择下列一种水果：</div>
	<input type="radio" name="friute" value="1"  οnclick="showMethod(this);"/>苹果<br/>
	<input type="radio" name="friute" value="2"  οnclick="showMethod(this);" />香蕉<br/>
	<input type="radio" name="friute" value="3"  οnclick="showMethod(this);" />山楂<br/>
	<input type="radio" name="friute" value="4"  οnclick="showMethod(this);"/>橘子<br/>
	<input type="radio" name="friute" value="5"  οnclick="showMethod(this);"/>猕猴桃<br/>
	<input type="radio" name="friute" value="6"  οnclick="showMethod(this);"/>西红柿<br/>
	<input type="button" value="查看结果" οnclick="check();" />
	<div id="result1">
		您的性格扭曲
	</div>
	<div id="result2">
		你变态
	</div>
	<div id="result3">
		你傻瓜
	</div>
	<div id="result4">
		你很优秀
	</div>
	<div id="result5">
		我的王子
	</div>
	<div id="result6">
		哦，My Gad！！
	</div>
</body>
<script type="text/javascript">
	/*	该方法是当单机单选摁扭时的操作
	function showMethod(friute){
		//alert(friute.value);
		for(var i=1;i<7;i++){
			var div=document.getElementById("result"+i);
			if(parseInt(friute.value)==i){
				div.style.display="block";
			}else{
				div.style.display="none";
			}
		}
	
	}*/
	
	//该方法是单击查询摁扭时再显示
	function check(){
		 var radios=document.getElementsByName("friute");
		for(var i=0;i<radios.length;i++){
			var div=document.getElementById("result"+(i+1));
		 	if(radios[i].checked==true){
				//alert(radios[i].value);
				div.style.display="block";
			}else{
				div.style.display="none";
			}
		 }
	}
	 

	function info(info){
		//var radioYes=document.getElementById("yes");
		//var radioNo=document.getElementById("no");
		//alert(info.value);
		var form=document.getElementById("form");//获取表单div对象
		if(info.value=="a"){
			//alert("aaaaaaaaaa");
			form.style.display="block";
		}
		if(info.value=="b"){
			//alert("bbbbbbbbbb");
			form.style.display="none";
		}
	}
	function method(){
		
	}
</script>
</html>

King·Forward

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS+HTML实例集合三，用户自定义创建表格并删除指定行、列，对表格中的数据进行排序，radio单选摁扭之调查问卷、之选择题

用户自定义创建表格并删除指定行、列无标题文档 table{ border:#0000FF 1px solid; width:600px; border-collapse:collapse;/*将表格边框与单元格边框重合*/ } table td{ border:#99FF00 1px solid; padding:30px;/*如果是一个参数，表示上右下左四个方向数
复制链接

扫一扫