通过javascript实现动态添加删除表格的行

       有时我们开发的界面表格的行个数是由用户决定的,这时可以通过javascript实现动态添加删除表格的行,来满足需求。

1、 脚本:

<SCRIPT LANGUAGE="JavaScript">
<!--
var i = 0;

function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="第" + tmpNum+"行"+"<input  length='5' type='text' name='txt"+tmpNum+"' value='"+tmpNum+"'>";//要在该格添加的HTML代码填在这里,因为这里是text,注意不要重名了。
  idLast.innerText=idTB.rows.length-1;
  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;

if (sIndex>1)
{
 idTB.deleteRow(sIndex);
}

 
  idLast.innerText=idTB.rows.length-1;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
//-->
</SCRIPT>

2  、实现

<table id="idTB" border=0><!--注意id,与JS中的要相对应-->

  <tr id=idTR>
  </tr>
</table>
<input type="button" οnclick="addRow()" value="添加一行">
<input type="button" οnclick="delRow()" value="删除一行"> 删除哪一行:<input id="idIndex" length="5">(<a id="idFirst">1</a>~<a id="idLast">0</a>)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值