知识点在于:
1 dom操作,创建,增加,删除html元素
2 js改变html元素style属性
3 fierfox和ie的css处理的异同,例如class,className,!important等
4基本的js语法,查找元素,遍历表单元素集合
因为pj blog不方便显示代码,详细代码见: http://www.cnblogs.com/dalink/articles/481657.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css"> .button {}{ background-color: #003399; border-bottom-style:solid; color:#FFFFFF;font-size:12px; border-color:#000000; border-style:solid;cursor:pointer;border-width:thin; border-width:1px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px; }
.showtalbe {}{}
.showtable font{}{ color:#000000; font-size:12px; font-family:"新宋体"}
.showtable tbody{}{ background-color:#CCCCCC; font-size:12px;text-align:left;word-break:break-all;}
.showtable thead{}{ background-color:#003399; height:20px;line-height:15px; color:#FFFFFF; font-size:12px; font-family:"新宋体";text-align:left;}
.showtable td{}{padding-left:8px;}
.inputNormal {}{ font-size:12px; font-family:'新宋体'; color: #000000; cursor:pointer; background-color:#cccccc; width:200px; text-align:left; border-color: #cccccc; border-style:solid; border-width:1px; height:30px; overflow-x:hidden; overflow-y:auto; }
</style>
<script>
//给string增加去首尾空白的方法
String.prototype.trim = function(){return this.replace(/(^/s*)|(/s*$)/g, "");}
var startID = 1;
function $(objID)
{
return document.getElementById(objID);
}
//自动添加
function adddataauto()
{
var objTable =$("objTable");
var newID = startID++ ;
var newName = "name" + newID ;
addtr(newID,newName);
addoption(newID,newName);
}
//手工添加
function adddatamanual()
{
var newID = $("caseID").value;
var newName = $("caseName").value;
//检查数据格式是否正确
if(!checkregx(newID,newName))
return;
//检查ID是否存在
if(!findvalueinselect(newID,$("selectList")))
{
alert(newID + "已经存在");
return;
}
addtr(newID,newName);
addoption(newID,newName);
}
//表格中添加一行
function addtr(objID,objName)
{
//创建td节点
var td0= document.createElement("td");
var td1= document.createElement("td");
var td2= document.createElement("td");
var td3= document.createElement("td");
var deleteButton = document.createElement("input");
var checkBox = document.createElement("input");
var textArea = document.createElement("textarea");
//设置td样式
td0.setAttribute("width","26px");
td1.setAttribute("width","15px");
td2.setAttribute("width","73px");
td3.setAttribute("width","50px");
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("id","deleteButton" + objID);
deleteButton.setAttribute("name","deleteBox"+ objID);
deleteButton.setAttribute("value","delete");
deleteButton.setAttribute("className","button");
deleteButton.setAttribute("class","button");//for ff
//设置deletebutton的事件
deleteButton.onclick = function(event)
{
if(event == null)
{
event = window.event; // For IE
}
var eventObj = event.srcElement? event.srcElement : event.target;
var tbodyNode = eventObj.parentNode.parentNode.parentNode;
var trNode = eventObj.parentNode.parentNode
var rowIndex = trNode.rowIndex;
var objTable = document.getElementById("objTable");
objTable.removeChild(tbodyNode);
deleteoptions(rowIndex-1);
}
//设置checkbox的样式
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id","deleteBox");
checkBox.setAttribute("name","deleteBox");
checkBox.setAttribute("value",objID);
//设置checkbox的事件
checkBox.onclick = function(event)
{
if(event==null)
{
event = window.event;
}
var eventObj = event.srcElement? event.srcElement : event.target;
var checkBox = eventObj;
var trNode = checkBox.parentNode.parentNode
var textBoxNode = checkBox.parentNode.nextSibling.nextSibling.childNodes[0];
var checked =checkBox.checked;
if(checked)//被选中时的样式
{
trNode.style.backgroundColor="#8CC6FF";
textBoxNode.style.borderColor="#8CC6FF";
textBoxNode.style.backgroundColor="#8CC6FF";
}
else//取消选择时的样式
{
trNode.style.backgroundColor="#CCCCCC";
textBoxNode.style.backgroundColor="#CCCCCC";
textBoxNode.style.borderColor="#CCCCCC";
}
}
//设置textarea的样式
textArea.setAttribute("className","inputNormal");
textArea.setAttribute("class","inputNormal");//for ff
textArea.setAttribute("value",objName);
textArea.setAttribute("id","myText");
textArea.setAttribute("name","myText");
textArea.value = objName;//for ff
//设置textarea的事件
textArea.onfocus = function(event)
{
if(event==null)
{
event = window.event;
}
var obj = event.srcElement? event.srcElement : event.target;
obj.style.backgroundColor="#ffffff";
obj.style.height ="50px";
obj.style.cursor = "text";
obj.style.overflowY = "scroll";
obj.inFocus=true;
}
textArea.οnmοuseοver= function(event)
{
if(event==null)
{
event = window.event;
}
var obj = event.srcElement? event.srcElement : event.target;
if(!obj.inFocus)
{
obj.style.borderColor="#FF0000";
obj.style.backgroundColor="#F0F8FF";
}
}
textArea.οnmοuseοut= function(event)
{
if(event==null)
{
event = window.event;
}
var obj = event.srcElement? event.srcElement : event.target;
var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;
if(obj.inFocus)//处于输入状态
return;
if(checkBoxNode.checked)//被选中
{
obj.style.borderColor = "#8CC6FF";
obj.style.backgroundColor="#8CC6FF";
return;
}
if(!obj.inFocus)
{
obj.style.borderColor = "#cccccc";
obj.style.backgroundColor="#cccccc";
}
}
textArea.οnblur= function(event)
{
if(event==null)
{
event = window.event;
}
var obj = event.srcElement? event.srcElement : event.target;
var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;
if(checkBoxNode.checked)
{
obj.style.borderColor = "#8CC6FF";
obj.style.backgroundColor="#8CC6FF";
}
else
{
obj.style.borderColor = "#cccccc";
obj.style.backgroundColor="#cccccc";
}
obj.style.height ="30px";
obj.style.overflowY = "auto";
obj.style.cursor = "pointer";
obj.inFocus=false;
}
td0.appendChild(checkBox);
td1.innerHTML = objID;
td2.appendChild(textArea);
td3.appendChild(deleteButton);
//创建tr节点
var trNode = document.createElement("tr");
trNode.appendChild(td0);
trNode.appendChild(td1);
trNode.appendChild(td2);
trNode.appendChild(td3);
//创建tbody节点,必须使用tbody,不然无法使用dom方式添家行,只能用insertRow
var trBody = document.createElement("tbody");
trBody.appendChild(trNode);
$("objTable").appendChild(trBody);
}
//下拉菜单中添加一项
function addoption(objID,objName)
{
var list1 = $("selectList");
var opNode = document.createElement("option");
opNode.text = objName;
opNode.value =objID;
//必须用add而不能用appendchild,用appendchid文本值显示不出来??
list1.options.add(opNode);
}
//查找select中的value
function findvalueinselect(p_objValue,p_objList)
{
for(i=0;i<p_objList.options.length;i++)
{
if(p_objList.options[i].value ==p_objValue)
return false;
}
return true;
}
//删除选中的行
function deleterows()
{
var objTable =$("objTable");
var boxList = document.getElementsByName("deleteBox");
var idArray = new Array();
for(i=0;i<boxList.length;i++)
{
if(boxList[i].checked ==true)
idArray.push(i);
}
var rowIndex;
var nextDiff =0;
//面试的时候没考虑到rowindex变化,连续删除出错
for(j=0;j< idArray.length;j++)
{
rowIndex = idArray[j]+1-nextDiff++
objTable.deleteRow(rowIndex);
deleteoptions(rowIndex-1);
}
}
//删除下拉菜单对应的项
function deleteoptions(itemIndex)
{
var list = $("selectList");
list.remove(itemIndex);
}
//提交数据到服务器
function checksubmit()
{
var postString = $("postString");
var boxList = document.getElementsByName("deleteBox");
var textList = document.getElementsByName("myText");
var idArray = new Array();
for(i=0;i<boxList.length;i++)
{
idArray.push(boxList[i].value + "|" + textList[i].value);
}
postString.value = idArray.join("-");
alert(postString.value);
}
//正则式验证输入格式
function checkregx(p_idCase,p_nameCase)
{
var regID=new RegExp("^[1-9]//d*$");
var idValue = p_idCase.trim();
var flag = true;
var regName=new RegExp("^[a-zA-Z_][0-9a-zA-Z-_.]*$");
var nameValue = p_nameCase.trim();;
var noticeText="";
if(regID.test(idValue)==false)
{
noticeText +="id必须为数字,并且大于0/n";
flag = false;
}
if(!regName.test(nameValue))
{
noticeText +="name格式不合法";
flag = false;
}
if(!flag)
{
alert(noticeText);
return false;
}
return true;
}
//应用自定义的css样式
function setcss()
{
var inputList = document.getElementsByTagName("input");
for(i= 0;i<inputList.length;i++)
{
//验证页面上的文本框
if( inputList[i].type == "button" ||
inputList[i].type == "submit" ||
inputList[i].type == "reset"
)
{
inputList[i].className="button";
}
}
}
//全选或者全不选
function selectall()
{
//ff中去name属性 ie中取id属性
var objList = document.getElementsByName("deleteBox");
for(i=0;i<objList.length;i++)
{
var checked =objList[i].checked;
objList[i].checked=checked?false:true;
var trNode = objList[i].parentNode.parentNode;
var textBoxNode = objList[i].parentNode.nextSibling.nextSibling.childNodes[0]
if(!checked)//没被选中
{
trNode.style.backgroundColor = "#8CC6FF";
textBoxNode.style.borderColor="#8CC6FF";
textBoxNode.style.backgroundColor="#8CC6FF";
}
else
{
trNode.style.backgroundColor = "#CCCCCC";
textBoxNode.style.backgroundColor="#CCCCCC";
textBoxNode.style.borderColor="#CCCCCC";
}
}
}
</script>
</HEAD>
<body οnlοad="setcss();">
<form id="Form1" method="post" runat="server" οnsubmit="return checksubmit();">
<input type="hidden" id="postString">
<div>
<table id="objTable" class="showtable">
<thead>
<tr>
<td width="26"><input type="checkbox" id="selectAll" οnclick="selectall();"></td>
<td width="15">id</td>
<td width="210">name</td>
<td width="73">delete</td>
</tr>
</thead>
</table>
<table>
<tr>
<td>
<select id="selectList">
<option title="" value="0" selected>所有项目</option>
</select>
</td>
</tr>
</table>
<input type="button" value="add new row" οnclick="adddataauto();"> <input type="button" value="delete rows" οnclick="deleterows()">
<input type="submit" value="submit">
</div>
<table>
<tr>
<td style="HEIGHT: 21px">id 大于1</td>
<td style="HEIGHT: 25px">name 数字,字母,-_.</td>
</tr>
<tr>
<td><input type="text" id="caseID"></td>
<td><input type="text" id="caseName"></td>
</tr>
<tr>
<td><input type="reset" value=" reset "></td>
<td><input type="button" value="manual new" οnclick="adddatamanual();"></td>
</tr>
</table>
</form>
</body>
</HTML>