动态添加表格一行(javascript)

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>添加表格信息</title>

<script language="javascript" type="text/javascript">  

function AddRow()

{

 //添加一行

 var i =tab1.rows.length;

 var Nam="'div1'";

 var Cod="fuJ"+i;

 var newTr = tab1.insertRow();

 //添加列

 var newTd0 = newTr.insertCell();

 var newTd1 = newTr.insertCell();

 var newTd2 = newTr.insertCell();

 var newTd3 = newTr.insertCell();

 //设置列内容和属性

 newTd0.innerHTML = '<input type="checkbox" id="box1" onClick="GetRow()"/ /><input type="hidden" name="fuJ" id='+Cod+' />'; 

 newTd1.innerHTML = " 衣服尺码";

 newTd2.innerHTML = " 衣服花色";

 newTd3.innerHTML = " 处理类型";

}

function DelRow()

{

//删除一行

  var shu=0;

  var cheCou=document.all("box1");

   for(var i=0;i<cheCou.length;i++)

   {

    if (cheCou[i].checked==true)

    {

      shu++;

    }

   }

   if(shu==cheCou.length)

   {

     alert('最少要添加一件衣服');

     return;

   }

   else  if(shu==0)

   {

     alert('请选择你要删除的信息');

     return;

   }

   else if(shu==1)

   {

     for(var i=0;i<cheCou.length;i++)

     {

       if(cheCou[i].checked==true)

       {

        tab1.deleteRow(i+1);

       }

     }

   }

   else if(shu>1)

   {

     for(var a=0;a<shu;a++)

     {

         for(var i=0;i<cheCou.length;i++)

      {

        if(cheCou[i].checked==true)

        {

         tab1.deleteRow(i+1);

         break;

        }

      }

     }

   }

}

function GetRow()

{

  //获得行索引

  //两个parentElement分别是TD和TR哟,rowIndex是TR的属性

  //this.parentElement.parentElement.rowIndex

  cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; 

}

</script>

  </head>

  <body>

 <form name="form1" action="" method="post"   >

 <center>

    <fieldset>

     <legend><strong>动态添加一行表格</strong></legend>

     <input type=hidden id="hid" name="hid"/ />

  <table id="tab1" align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">

      <thead>

    <tr>

     <th align="center" width="10%">选择</th>

     <th align="center" width="15%">衣服尺码</th>

     <th align="center" width="15%">衣服花色</th>

     <th align="center" width="15%">处理类别</th>

    </tr>

   </thead>

   <tr >

     <td><input type=checkbox id="box1" onClick="GetRow()" />

         <input type="hidden" name="fuJ" id="fuJ1" />

     </td>   

     <td> 衣服尺码</td>

     <td> 衣服花色</td>

     <td> 处理类别</td>

   </tr>   

       </table>

       <table  align="center" border="1" cellPadding="4" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:95%;word-break: break-all">

       <tr>

         <td align="right">

       <input type="button" name="Submit" value="增加一行" onClick="javascript:AddRow();" />

          <input type="button" name="Submit" value="删除一行" onClick="javascript:DelRow();" />

         </td> 

      </tr> 

   </table>

</form>

  </body>

</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值