动态添加/删除表格的一行我的办法

最新推荐文章于 2021-08-21 16:43:24 发布

JOHNCOOLS

最新推荐文章于 2021-08-21 16:43:24 发布

阅读量1.2k

点赞数

分类专栏： HTML JS 网页设计学习与技巧文章标签： table html function input button border

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>uploadfile</title>
<script language="javascript">
function addRow()
{//添加表格的一行
oTR=idTB.insertRow(idTB.rows.length);
tmpNum=oTR.rowIndex;
oTD=oTR.insertCell(0);
oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
   oTD.innerHTML="<td height='25'><nobr><font style='font-size:12px;color:#000080;font-weight:bold;'>下发内容</font></nobr></td>";

oTD=oTR.insertCell(1);
oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
oTD.innerHTML="<input type='file' name='txt"+tmpNum+"' />";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。

return true;
}
function delRow(){//删除表格的一行
sIndex=oTR.rowIndex;
if(sIndex=='')
    sIndex=idTB.rows.length-1;
else
    sIndex=parseInt(sIndex)-1;
if(sIndex>0)
{
      idTB.deleteRow(sIndex);
}

}

function addRow1()
{//添加表格的一行
oTR=table1.insertRow(table1.rows.length);
tmpNum=oTR.rowIndex;
oTD=oTR.insertCell(0);
oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
   oTD.innerHTML="<td height='25'><nobr><font style='font-size:12px;color:#000080;font-weight:bold;'>新增文件</font></nobr></td>";

oTD=oTR.insertCell(1);
oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
oTD.innerHTML="<input type='file' name='txt"+tmpNum+"' />";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。

return true;
}
function delRow1(){//删除表格的一行
sIndex=oTR.rowIndex;
if(sIndex=='')
    sIndex=table1.rows.length-1;
else
    sIndex=parseInt(sIndex)-1;
if(sIndex>0)
{
      table1.deleteRow(sIndex);
}

}

function addRow2()
{//添加表格的一行
oTR=table2.insertRow(table2.rows.length);
tmpNum=oTR.rowIndex;
oTD=oTR.insertCell(0);
oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
   oTD.innerHTML="<td height='25'><nobr><font style='font-size:12px;color:#000080;font-weight:bold;'>调整文件</font></nobr></td>";

oTD=oTR.insertCell(1);
oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
oTD.innerHTML="<input type='file' name='txt"+tmpNum+"' />";//要在该格添加的HTML代码填在这里，因为这里是text，注意不要重名了。

return true;
}
function delRow2(){//删除表格的一行
sIndex=oTR.rowIndex;
if(sIndex=='')
    sIndex=table2.rows.length-1;
else
    sIndex=parseInt(sIndex)-1;
if(sIndex>0)
{
      table2.deleteRow(sIndex);
}

}

</script>
<style type="text/css">

</style>
</head>

<body>

<form name="form1" method="post" enctype="multipart/form-data" action="upload.jsp">

<table width="100%" border="1" align="center" cellpadding="1" cellspacing="1" class=text id="idTB">

</table>
    <table width="100%" border="1">
  <tr>
    <td width="48"> </td>
    <td width="99"><input name="button2" type="button" οnclick="addRow()" value="添加" /></td>
    <td width="99">
     <input name="button" type="button" οnclick="delRow()" value="删除" />    </td>
    <td width="701"><input type="submit" name="Submit2" value="开始上传" /></td>
  </tr>
       </table>
    </p>

</form >

<p><a href="#">返回申请表单</a></p>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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