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

最新推荐文章于 2022-05-20 09:08:01 发布
最新推荐文章于 2022-05-20 09:08:01 发布
阅读量1.2k 收藏
点赞数
分类专栏： HTML JS 网页设计学习与技巧 文章标签： table html function input button border

 <!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">
<!--
.STYLE1 {
 color: #3333CC;
 font-weight: bold;
}
-->
</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">&nbsp;</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>


 
JOHNCOOLS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js实现的动态添加一行
06-04
用js实现的动态添加一行 支持firefox IE学习ajax的基础练习
Jquery实现表格动态增加一行，删除一行.html
05-15
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
纯JS table动态增加行
Everyone_boy的博客
08-21 7334
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
vue动态添加行/删除行
hellotutu的博客
05-20 6018
vue动态添加行页面效果代码：data部分methods部分 页面效果 点击相应的添加后，每个 el-table 增加一行 代码： <el-card> <div class="titleitem"> <span >工作/学习经历</span> </div> <el-table
jsp 动态添加一行数据_jsp技术
weixin_39801714的博客
12-03 779
在学习了servlet之后，使用servlet进行页面展现，代码的书写过于麻烦。极大的影响了开发的效率，那么怎么样可以像写网络编程那样简单方便的写出页面代码呢？这个时候我们就可以使用jsp技术了，那jsp又是什么呢？Jsp全名是java server page中文名叫做java服务器页面，其根本就是一个简化的servlet。jsp的特点是：本质上还是servlet；跨平台，一次编译，各处使用；组件...
基于JavaScript实现动态添加删除表格的行
10-22
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态...
JQuery动态添加和删除表格行的方法
12-09
本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下： 昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到...
jQuery 动态添加、删除表格行特效
05-12
内容索引:脚本资源,jQuery,动态删除　jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
JQuery实现动态表格点击按钮表格增加一行
10-25
动态表格,功能为点击添加按钮，表格增加一行并给其name属性赋予的值，点击删除，自动删除这一行，具体实现如下
layui点击数据表格添加或删除一行的例子
10-16
今天小编就为大家分享一篇layui点击数据表格添加或删除一行的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用jquery给指定的table动态添加一行、删除一行
10-21
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
10-15
主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
动态添加删除表格行的js实现代码
12-10
[removed] //窗口表格增加一行 function addNewRow(){ var tabObj=document.getElementById(“myTab”);//获取添加数据的表格 var rowsNum = tabObj.rows.length; //获取当前行数 var colsNum=tabObj.rows...
利用jquery给指定的table动态添加一行、删除一行的方法
11-22
今天在项目中，刚好用到给指定的table添加一行、删除一行，就直接找google，搜出来的东西不尽如人意，不是功能不好就是千篇一律，简直浪费时间还不讨好，于是乎就自己动手封装个，现就把代码分享出来，避免大伙重复...
js动态添加表格逐行添加、删除、遍历取值的实例代码
10-18
最近做项目遇到这样的需求，要求表格添加一行，表格删除一行，表格遍历取值等。下面小编给大家带来了js动态添加表格逐行添加、删除、遍历取值的实例代码，需要的朋友参考下
js动态添加删除表格行
最新发布
06-10
可以使用JavaScript动态添加和删除表格行，以下是一个简单的示例： 添加行： ```javascript // 获取表格对象 var table = document.getElementById("myTable"); // 创建一个新的行 var newRow = table.insertRow...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值