用户自定义创建表格并删除指定行、列
<!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>