Javascript动态添加数据的解决方案

//全局变量, 记录信息的条数
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"/>
&nbsp;&nbsp; <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">&nbsp;</td>
      <td height="30" align="left">&nbsp;</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地址&nbsp;</td>
            <td width="268" class="tableright">动作&nbsp;</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;}