javascript 动态添加表格行
来源：互联网 发布：好看的u盘 知乎 编辑：程序博客网 时间：2024/05/09 07:00
javascript 动态添加表格行
文/Ray
表格部分代码如下：
<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()"/>
<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>
<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.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";
}
}
{
if(event==null)
{
event = window.event;
}
var obj = event.srcElement? event.srcElement : event.target;
var checkBoxNode = obj.parentNode.previousSibling.previousSibling.firstChild;
{
obj.style.borderColor = "#8CC6FF";
obj.style.backgroundColor="#8CC6FF";
}
else
{
obj.style.borderColor = "#cccccc";
obj.style.backgroundColor="#cccccc";
}
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 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 nameValue = p_nameCase.trim();;
var noticeText="";
{
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";
}
}
}
</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 ...
if (oSel.selectedIndex>=0) {
oSel.options.remove(oSel.selectedIndex);
} else {
alert("请先至少选择一个关键字");
};
}
oSel.options.remove is not a function.
最后发现只要作一下小改动就可兼容IE和FF ：）
改动后的代码如下：
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。
代码如下：
<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>
应用实例二：
<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" /> <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>
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- JavaScript动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript 动态添加表格行
- javascript动态添加表格
- javascript 动态添加表格
- JavaScript动态添加表格
- python build-in functions
- C# 实现调用 SAP Com组件 与 SAP数据的乱码问题
- Tomcat研究之ClassLoader
- sscanf函数的用法
- Google App Engine做的记录访客点击的小工具
- javascript 动态添加表格行
- out.printNavlinkDIV(url,outputname)
- Posix 线程
- offsetParent解释
- 《Head First Design Patterns》笔记十五：MVC
- 精品战略 vs 山寨战略
- 我自己配置的，如何？
- opengl 约定 & 矩阵转换规则
- SQL Server导出导入数据方法
