//全局变量, 记录信息的条数
var num=0;
//添加信息
function AddMac()
{
//获得两个输入信息的TEXT对象
var smac=document.getElementById('smac');
var emac=document.getElementById('emac');
/*1.在这里可以做一些输入合法性检查 比如你输入的MAC地址是否符合规范
*2.还可以做一些信息的条数限制 比如最大255条
*3.还可以做一些信息重复性检查 重复的信息是否可以填入表内
*如果这些都做了,咱们再继续向下走
*/
var mac=smac.value + " - " + emac.value;
//把全局变量自加1,
num ++;
//获得要添加的表格对象,并且加入一行(这里可能有些不明白,别着急,咱先放放,一会我会做解释)
var x=document.getElementById('macTable').insertRow(num-1);
//加入所需要的列,这里我加入两列
//第一列是显示已经加入的信息
var a=x.insertCell(0);
//第二列我做一些操作,比如删除
var n=x.insertCell(1);
//向第一列中插入数据,利用innerHTML的方法
a.innerHTML=smac.value;
//插入一个带ONCLICK事件图片,目的是可以删除该记录
n.innerHTML="<img style="cursor:pointer" title="删除" src="/images/tubiao/del.gif" οnclick="deleteRowMac(this)"/>";
//获得记录信息的对象 (隐藏对象)
var groups=document.getElementById('groups');
//获得记录信息条数的对象 (隐藏对象)
var macsnum=document.getElementById('macsnum');
//对象赋值
groups.value += smac.value;
groups.value += ",";
groups.value += emac.value;
groups.value += ";";
macsnum.value=num;
}
//删除信息
function deleteRowMac(r)
{
//获得要删除的行的索引
var i=r.parentNode.parentNode.rowIndex;
//利用索引删除该行
document.getElementById('macTable').deleteRow(i)
//获取记录信息的隐藏对象
var mm=document.getElementById("groups");
//将记录切割,存入一个数组
var array=mm.value.split(";");
//将隐藏域的值清空
mm.value = "";
var index=i;
//重新写入隐藏域的值
for(j = 0; j < array.length-1; j++)
{
if(j != index)
{
mm.value += array[j] + ";"
}
}
num--;
//获取记录信息数量的隐藏对象
var macsnum=document.getElementById("macsnum")
macsnum.value =num;
}
下面放入HTML的代码
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" colspan="2" align="center">
<fieldset style="width:80%;">
<legend>MAC 地址</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="30" align="right">
MAC地址范围:
</td>
<td height="30" align="left">
<input name="smac" type="text" class="input" id="smac" maxlength="17" οnblur="change_sign(smac)" style="text-transform:lowercase"/>
-
<input name="emac" type="text" class="input" id="emac" maxlength="17" οnblur="change_sign(emac)" style="text-transform:lowercase"/>
<input name="btnMac" type="button" οnclick="changemac()" class="input_button" id="btnMac" value="添加" />
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td width="20%" height="30" align="center"> </td>
<td height="30" align="left"> </td>
</tr>
<tr>
<td height="30" colspan="2" align="center">
<table style="border:1px solid #39739C;" width="540" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="270" class="tableleft">MAC地址 </td>
<td width="268" class="tableright">动作 </td>
</tr>
<!--循环开始 -->
<tr>
<td colspan="3" align="center" class="tdleft">
<table id="macTable">
</table>
</td>
</tr>
<!--循环结束 -->
</table>
<textarea name="groups" style="display:none" cols="40" rows="5" class="input" id="groups"></textarea>
<input type="hidden" name="macsnum" id="macsnum" />
</td>
</tr>
</table>
这里主要是放入一个
<table id="macTable">
</table>
目的就是上面说过的要用这个表格插入一行
还要有记录值的隐藏表单
<textarea name="groups" style="display:none" cols="40" rows="5" class="input" id="groups"></textarea>
<input type="hidden" name="macsnum" id="macsnum" />
再加入CSS装饰一下,就更美了~~~
#macTable td{
width:540px;
text-align:center;
height:16px;
border-bottom:1px solid #AEC2CF;}
Javascript动态添加数据的解决方案
最新推荐文章于 2024-04-25 00:00:00 发布