与站长QQ交谈
150042092
手机:13380206696
首页  软件商城  开发技术  工具下载  教学资源  网络课堂  赤雪天空  留言  QQ空间
 位置： 红宝网络 >> 开发技术 >> JavaScript技术 >> 正文 在本站购买的软件3年内免费升级  [2008-07-01 23:02:29]      人教版小学数学1-6册课件已全部上传完  [2007-07-12 22:08:11]      人教版小学语文1-6册课件已全部上传完  [2007-06-23 00:16:04]      关于本站课件说明  [2007-06-20 08:56:00]      红宝网络第三次改版了  [2007-06-09 16:32:46]
  javascript动态添加表格行 热   3星级
javascript动态添加表格行
［ 作者：Admin     来源：红宝网络     点击数：     更新时间：2008-4-21     文章录入：Admin ］
【字体： 字体颜色】


转自：http://jhf2512.blog.163.com/blog/static/26094379200711754951344/

动态添加表格行
表格部分代码如下：
<table id="testTbl" border=1>
<tr id="tr1">
<td width=6%><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr bgcolor=#0000FF>
<td width=6%><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>

动态添加表行的javascript函数如下：

function addRow(){

//添加一行

var newTr = testTbl.insertRow();

//添加两列

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">';

newTd2.innerText= '新加行';

}

就这么简单，做点详细的说明：

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后。

insertCell()和insertRow的用法相同。

2、动态设置属性和事件

上面行数中的innerHTML和innerText都是列的属性。

这个inner，就是“inner”到<tb></tb>之间，innerText是添加到<tb></tb>之间的文本，innerHTML是添加到<tb></tb>之间的HTML代码(这个so简单，这个解释挺多余的)

设置其他属性也是用同样的方式，比如，设置行背景色

newTr.bgColor = 'red';

 

设置事件也一样，需要简单说明一点。

比如，我要让点击新加行的时候执行一个自己定义的函数 newClick,newClick行数如下：

function newClick(){

alert("这是新添加的行");

｝

对onclick事件设置这个函数的代码如下：

newTr.onclick = newClick;

这里需要主义的是，＝后面的部分必须是函数名,而且不能带引号，

newTr.onclick = newClick();

newTr.onclick = 'newClick';

newTr.onclick = "newClick";

上面的写法都是错误的。

为什么，其实知道为什么没有什么意思，知道怎么用就OK了，如果不想知道，可以跳过下面这一段。

 

实际上这个=后面的newClick是指向自己定义的newClick函数的指针，javascript里面函数名就是指向函数的指针，加了引号括号什么的浏览器就找不到那个函数了。

下面的写法，也是正确的

newTr.onclick = function newClick(){

alert("这是新添加的行");

｝
 
 
 
 
 
 
 
例子
 
一、创建表格(观看效果）

<html>
<head>
<title>Table test</title>
</head>
<body>
<div id="tableTest">

</div>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");

//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");

//创建5行
for(var i=0;i<5;i++){
 var _tr=_table.insertRow(i);
 //创建4列
 for(var j=0;j<4;j++){
  var _td=_tr.insertCell(j);
  var _tn=document.createTextNode(i.toString()+j.toString());
  _td.appendChild(_tn);
 }
}
//将表格显示于页面
container.appendChild(_table);
//-->
</script>

 

 二、添加、删除行与列（观看效果）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>


</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td>00</td>
            <td>01</td>
            <td>02</td>
            <td>03</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        <tr>
            <td>30</td>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
        <tr>
            <td>40</td>
            <td>41</td>
            <td>42</td>
            <td>43</td>
        </tr>
    </tbody>
</table>
<br/>
<input type="button" value="删除一行" onclick="deleteRow()"/>&nbsp; &nbsp;
<input type="button" value="删除一列" onclick="deleteColumn()"/>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获得表格对象
var _table=document.getElementById("table1");

//定义函数，用于删除第一行
function deleteRow(){
 _table.deleteRow(0);
}
//定义函数，用于删除第一列
function deleteColumn(){
 //删除一列时需要对每一行分别进行列删除
 for(var i=0;i<_table.rows.length;i++){
  _table.rows[i].deleteCell(0);
 }
}
//-->
</script>

三、交换两行的位置（观看效果）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
<style type="text/css">
<!--
td  { text-align:center;font-size:12px;padding:3px;}
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td width="25%">1</td>
            <td width="25%">11</td>
   <!--使用javascript：void(0)是为了能够传递this参数到事件处理程序-->
            <td width="25%"><a href="javascript：void(0)" onclick="moveUp(this)">上移</a></td>
            <td width="25%"><a href="javascript：void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>22</td>
            <td><a href="javascript：void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript：void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>33</td>
            <td><a href="javascript：void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript：void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>44</td>
            <td><a href="javascript：void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript：void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>55</td>
            <td><a href="javascript：void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript：void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
    </tbody>
</table>
</body>
</html>

<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
 //遍历element的子结点
 for (var i = 0; i < element.childNodes.length; i++) {
  var node = element.childNodes[i];
  //判断是否是空白文本结点，如果是，则删除该结点
  if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
  node.parentNode.removeChild(node);
 }
}
//获得表格对象
var _table=document.getElementById("table1");
cleanWhitespace(_table);
//使表格行上移，接收参数为链接对象
function moveUp(_a){
 //通过链接对象获取表格行的引用
 var _row=_a.parentNode.parentNode;
 //如果不是第一行，则与上一行交换顺序
 if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收参数为链接对象
function moveDown(_a){
 //通过链接对象获取表格行的引用
 var _row=_a.parentNode.parentNode;
 //如果不是最后一行，则与下一行交换顺序
 if(_row.nextSibling)swapNode(_row,_row.nextSibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
 //获取父结点
 var _parent=node1.parentNode;
 //获取两个结点的相对位置
 var _t1=node1.nextSibling;
 var _t2=node2.nextSibling;
 //将node2插入到原来node1的位置
 if(_t1)_parent.insertBefore(node2,_t1);
 else _parent.appendChild(node2);
 //将node1插入到原来node2的位置
 if(_t2)_parent.insertBefore(node1,_t2);
 else _parent.appendChild(node1);
}
//-->
</script>

 

 

上周因为手头一个东西需要增加不定项目，左思右想没有找到一个好的解决办法。刚好旧友soot过来深圳，他给了我一个办法，用Javascript动态添加删除表格行的思路，并演示了一下，符合我的要求，于是拿出来与大家共分享

以下是我测试的代码
<%
 
 If Request("dd")<>"" Then
  Response.write(Ubound(split(request("dd"),",")))
 End If

%>
<html>
<head>
<script>
var i = 0;
function add() {
 i++;
 var tbl = document.all.tbl;
 var tr = tbl.insertRow();
 var td = tr.insertCell();
 td.innerHTML = "<input name='dd' value = 'dd"+i+"'>"
}
</script>
</head>
<body>

<form method=post>
<table id=tbl>
<tr><td><input name="dd" value = "dd0"></td></tr>
</table>

<INPUT TYPE="button" value="add" onclick="add()">
<INPUT TYPE="submit" value="submit">
</form>
</html>

添加之后同时将值存在一个隐藏表单域中，以便提交时使用，使用数组方法接收值。

今日在网上搜索，发现一个网友的博客中也有相关代码，于是帖过来一起参考。

 


<table id="idTB" border=0><!--注意id，与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
   
 idTB.deleteRow(sIndex);
 
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>

上周因为手头一个东西需要增加不定项目，左思右想没有找到一个好的解决办法。刚好旧友soot过来深圳，他给了我一个办法，用Javascript动态添加删除表格行的思路，并演示了一下，符合我的要求，于是拿出来与大家共分享

以下是我测试的代码
<%
 
 If Request("dd")<>"" Then
  Response.write(Ubound(split(request("dd"),",")))
 End If

%>
<html>
<head>
<script>
var i = 0;
function add() {
 i++;
 var tbl = document.all.tbl;
 var tr = tbl.insertRow();
 var td = tr.insertCell();
 td.innerHTML = "<input name='dd' value = 'dd"+i+"'>"
}
</script>
</head>
<body>

<form method=post>
<table id=tbl>
<tr><td><input name="dd" value = "dd0"></td></tr>
</table>

<INPUT TYPE="button" value="add" onclick="add()">
<INPUT TYPE="submit" value="submit">
</form>
</html>

添加之后同时将值存在一个隐藏表单域中，以便提交时使用，使用数组方法接收值。

今日在网上搜索，发现一个网友的博客中也有相关代码，于是帖过来一起参考。

 


<table id="idTB" border=0><!--注意id，与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
   
 idTB.deleteRow(sIndex);
 
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>

精通javascript编程
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
http://book.csdn.net/bookfiles/226/10022610688.shtml
一个完整的例子
<!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.onmouseover= 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.onmouseout= 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.onblur= 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 onload="setcss();">
        <form id="Form1" method="post" runat="server" onsubmit="return checksubmit();">
            <input type="hidden" id="postString">
            <div>
                <table id="objTable" class="showtable">
                    <thead>
                        <tr>
                            <td width="26"><input type="checkbox" id="selectAll" onclick="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" onclick="adddataauto();"> <input type="button" value="delete rows" onclick="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" onclick="adddatamanual();"></td>
                </tr>
            </table>
        </form>
    </body>
</HTML>


 
关于如何删除掉select中的option元素，兼容IE、Firefox ...
[ 2006-10-31 15:56:04 | 作者: CNLei ]
之前使用的代码是：
function delOption(oSel){ // 删除option
 if (oSel.selectedIndex>=0) {
  oSel.options.remove(oSel.selectedIndex);
 } else {
  alert("请先至少选择一个关键字");
 };
}
上述代码在IE下正常运行，但在Firefox下却报错：
oSel.options.remove is not a function.

最后发现只要作一下小改动就可兼容IE和FF ：）
改动后的代码如下：
function delOption(oSel){ // 删除option
 if (oSel.selectedIndex>=0) {
  oSel.remove(oSel.selectedIndex);
 } else {
  alert("请先至少选择一个关键字");
 };
}

上述两段代码的区别在于一个用了options，一个没用，即：
oSel.options.remove(oSel.selectedIndex);
oSel.remove(oSel.selectedIndex);
这两种写法IE都支持，但FF只支持后一种。

下面贴段完整的删除option的兼容IE、Firefox的实例代码，可一次删除多个被选中的options。
代码如下：
<!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" lang="gb2312">
<head>
<head>
<title> 一次删除多个被选中的options ， 兼容IE、Firefox ...</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CnLei.y.l@gmail.com">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="一次删除多个被选中的options，兼容IE、Firefox ..." />
<script type="text/javascript">
function delOption(oSel){
 if (oSel.selectedIndex>=0) {
 oSel.remove(oSel.selectedIndex);
 delOption(oSel);
 }
}
</script>
</head>
<body>
<h3>一次删除多个被选中的options ， 兼容IE、Firefox ...</h3>
<form method="" action="">
<select class="SltBar" name="MySel" size="10" multiple="true">
 <option value="IECN.NET">IECN.Net-JavaScript</option>
 <option value="IECN.NET">IECN.Net-XHTML/CSS</option>
 <option value="IECN.NET">IECN.Net-ASP/VBScript</option>
 <option value="IECN.NET">IECN.Net-PHP/MySql</option>
 <option value="IECN.NET">IECN.Net-.Net开发</option>
 <option value="IECN.NET">IECN.Net-Java开发</option>
</select>
<input type="button" value="删除选中的option" onclick="delOption(this.form.MySel);" />
</form>
</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" lang="gb2312">
<head>
<head>
<title> 代码实例：添加、删除域名列表</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CnLei.y.l@gmail.com">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="一次删除多个被选中的options，兼容IE、Firefox ..." />
<script type="text/javascript">
function delOption(oSel){
 if (oSel.selectedIndex>=0) {
 oSel.remove(oSel.selectedIndex);
 delOption(oSel);
 }
}

function addOption(oSel,sVal){
 for(var i=0;i<oSel.length;i++){
 if (oSel.options[i].value==sVal){
 alert("已存在："+sVal+"\n\n请不要添加重复数据！");
 return false;
 }
 }
 var oOption=new Option(sVal,sVal);
 oSel[oSel.length]=oOption;
}

</script>
</head>
<body>
<h3>一次删除多个被选中的options ， 兼容IE、Firefox ...</h3>
<form method="" action="">
<input type="text" name="siteUrl" size="50" value="google.com" />&nbsp;<input type="button" value="添加至列表" onclick="addOption(this.form.siteList,this.form.siteUrl.value);" /><br />
已有域名列表：<br />
<select name="siteList" size="10" multiple="true" size="10" style="width:300px;">
 <option value="265.com">265.com</option>
 <option value="cnlei.com">cnlei.com</option>
 <option value="iecn.net">iecn.net</option>
 <option value="dodo.hk">dodo.hk</option>
</select>
<input type="button" value="删除选中的域名" onclick="delOption(this.form.siteList);" />(可一次性选中多个进行删除)<br />
<input type="submit" class="InpBtn" value="保存已添加的域名列表" />
</form>
</body>
</html>
  • 上一篇文章： IEWebBrowser组件的execWB方法

  • 下一篇文章： JavaScript的Table表格对象
    • 发表评论   告诉好友   打印此文  收藏此页  关闭窗口  返回顶部
     最新5篇热点文章
     JavaScript的Table表格对象...
     javascript动态添加表格行...
     ＶＭＬ例子
     利用VML标记语言画图、动画...
     ASP在ACCESS数据库中动态添...
    		 
     最新5篇推荐文章
     IEWebBrowser组件的execWB...
     WEB打印代码大全
     打印web页面的指定区域
     用javascript读写注册表
     弹出窗口全屏的代码
    		 
     相 关 文 章

      网友评论：（只显示最新5条。评论内容只代表网友观点，与本站立场无关！）
     
     设为首页  加入收藏  关于本站  版权申明  联系站长  友情链接  在线留言  与我同在 

    Copyright © 红宝网络 www.aspok.net 2004-2010 All Rights Reserved.
    站长:韩保红 手机:13380206696　QQ:150042092　E_mail:lhkhbh@126.com

    粤ICP备05096685号