闲来无聊 随便写写 Javascript 动态添加数据的解决方案

在工作中遇到好多地方需要你点一个按钮，就可以动态的向一个表格里面插入一条数据，当你插入了N条记录以后，一起提交给后台，写入数据库，避免点一次，提交一次，增加服务器负担，下面我就简单介绍一下，我在工作中学习到的相关案例的解决方法，欢迎大牛们批评指导。由于这是我的处女作，文笔又不好，所以还请笔下留情，关于技术方面的，多指点，问候父母方面的，请自用~~废话不多说，下面见代码。

//全局变量, 记录信息的条数
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" onclick="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" onblur="change_sign(smac)" style="text-transform:lowercase"/>


-


<input name="emac" type="text" class="input" id="emac" maxlength="17" onblur="change_sign(emac)" style="text-transform:lowercase"/>


   <input name="btnMac" type="button" onclick="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;}

效果如下：