js实现table新增，删除行

最新推荐文章于 2021-06-08 16:08:04 发布
最新推荐文章于 2021-06-08 16:08:04 发布
阅读量767 收藏
点赞数
分类专栏： C#
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
    <script>
  function rowsAdd(){
var Container = document.getElementById("play");
var detailNum = Container.rows.length;
  //var _table=document.getElementById("takesheetspec");
  var _tr=Container.insertRow(-1);
  //alert(_tr.rowIndex);
  var _id='pd'+detailNum;
  for(var i=0;i<8;i++)
   {
    var _td=_tr.insertCell(i);
    _tr.id=_id;
     switch(i)
      {
       case 0:
        _td.id="cell"+detailNum;
          _td.innerHTML=detailNum+"<a href='#' name='delete' οnclick=tabledel("+detailNum+")>删除</a>";
          break;
       case 1:
          _td.innerHTML="<input type='text' size='7'>";  
          break;
       case 2:
          _td.innerHTML="<input type='text' size='7'>";  
          break;
       case 3:
          _td.innerHTML="<input type='text' size='7'>";  
          break;
       case 4:
         _td.innerHTML="<input type='text' size='7'>";  
          break;   
       case 5:
           _td.innerHTML="<input type='text' size='7'>";  
          break;
       case 6:
          _td.innerHTML="<input type='text' size='7'>";  
          break; 
       case 7:
          _td.innerHTML="<input type='text' size='7'>";  
          break; 
case 8:
    _td.innerHTML="<input type='text' size='7'>";  
break;
      }
   }    
}
function tabledel(row)
{
var Container = document.getElementById("play");
//alert(document.getElementById('index').value);
var _tr=document.getElementById("pd"+row);
row=_tr.rowIndex;
Container.deleteRow(row);
var LastTrIndex = Container.rows.length;
//var afterDel=row-1;
row+=1;
for(row;row<=LastTrIndex;row++) {
var _td=document.getElementById("cell"+row);
var _tr=document.getElementById("pd"+row);
var newRow=_tr.rowIndex;
_tr.id='pd'+newRow;
_td.id="cell"+newRow;
_td.innerHTML=newRow+"<a href='#' name='delete' οnclick=tabledel("+newRow+")>删除</a>";
}
}
function tabAllDel() 
{
var Container = document.getElementById("play");
Container.firstChild.removeNode(true);
//增加一行
var tr=Container.insertRow(-1);
var  cell  =  tr.insertCell(0);   
cell.innerHTML = "&nbsp;";
cell  =  tr.insertCell(1);   
cell.innerHTML = "name";   
cell  =  tr.insertCell(2);   
cell.innerHTML = "sex"; 
cell  =  tr.insertCell(3);   
cell.innerHTML = "age"; 
cell = tr.insertCell(4); 
cell.innerHTML = "QQ"; 
cell = tr.insertCell(5); 
cell.innerHTML = "MSN"; 
cell= tr.insertCell(6); 
cell.innerHTML = "E-mail";    
cell= tr.insertCell(7); 
cell.innerHTML = "remark";       
}
  </script>  


 </HEAD>
 <BODY> 
 <a href="#" οnclick="rowsAdd()">add</a>
  <a href="#" οnclick="tabAllDel()">deleteall</a>
  <table id="play">
<tr>
<td>&nbsp;</td>
<td>name</td>
<td>sex</td>
<td>age</td>
<td>QQ</td>
<td>MSN</td>
<td>E-mail</td>
<td>remark</td>
</tr>
  </table>
 </BODY>
</HTML>
wang49787
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript table 增加删除行,巧妙实现
02-01
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
js操作table元素实现表格行列新增、删除技巧总结
10-23
本文将深入探讨如何使用JavaScript来实现表格的行列新增和删除功能，这对于网页开发尤其是数据展示非常实用。 首先，我们来看如何删除表格的行。在JavaScript中，`doTableRowDelete`函数用于删除指定的行。这个函数...
Js删除table内的某一行
JarryLiu 的专栏
04-08 2964
1 //得到行对象 function getRowObj(obj) { var i = 0; while(obj.tagName.toLowerCase() != "tr"){ obj = obj.parentNode; if(obj.tagName.toLowerCase() == "table")return null; } return obj; } //根据得到的行对象得到所在的行数
js动态删除table表的指定行
DT-TK
06-05 8324
<html> <head> <title></title> <script type="text/javascript"> function deleteCurrentRow(obj){ var tr=obj.parentNode.parentNode; ...
用JavaScript循环地删除table中特定的一行
yang201610的博客
04-03 1439
用JavaScript删除table中特定的一行，需要注意：每删除一行，tab.rows.length的值就会减1。为确保程序的正确性，我们可以从最后一行开始删除，一直到你想保留的那些行。 以下是.net的语句： var tab = document.getElementById(“myTable”); var rowNum = tab.rows.length; for (var j =
js实现对table动态添加、删除和更新的方法
10-24
主要介绍了js实现对table动态添加、删除和更新的方法,涉及javascript针对html中table表格节点的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
JS 动态增加table
09-19
动态的增加JSP页面的table,此代码可以动态增加此页面同类型的table
JavaScript写的table增、批量删、模糊查询、文本框编辑
11-08
JavaScript写的table增、批量删、模糊查询、文本框编辑
js动态增加，删除td，tr，table，div
迷彩风情
01-26 747
js实现的动态添加，删除table内容： 截图如下： 1. 2. 源代码： main.css body { background-image: url(../images/qiantai/bg.png); font-family: arial; font-size: 12px; color: #d4d7da; text-align: center; back...
js动态生成table 经典
热门推荐
wearegouest的专栏
01-24 3万+
<br /><script language="javascript" type="text/javascript"> <br /> function createTable(){ <br /><br />     var div = document.getElementById("dd"); <br />     var table = document.createElement("table");//创建table <br />     var row = table.insertRow();//创
js动态添加table
有点笨的博客
09-03 2071
js对table操作 HTML代码 &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;table id=&amp;amp;quot;errTable&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/table&amp;amp;amp;gt; &amp;amp;amp;lt;/html&amp;amp;a
table标签添加行和删除行(Jquery)
key_zhaojd
12-21 5685
table标签添加行和删除行
JavaScript动态创建table表格
weixin_54366356的博客
06-08 1990
平时我们在用js去动态生成table表格的时候，都是一遍遍的去循环遍历数组中的字段，而在前端页面中表格多的时候就要写好多这样的代码，比较繁琐… 使用如下方法，直接调用即可生成table <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
JavaScript为table动态添加、删除行（六）
xiaouncle的博客
04-05 3931
我一共写了三种方法来实现添加行的功能，写了一种方法来实现删除行的功能，主要感觉是一定要熟悉JavaScript的API，其实这些东西API文档里面都有，就看你是否知道JavaScript中有这个函数或属性，然后把这些属性和函数整合起来就是你想要的东西。 所有HTML元素都能用的常用函数：node.appendChild(node)、 所有HTML元素都能用的常用属性：element.tagNa...
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
最新发布
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
bootstrapTable 多个表单新增删除行
05-27
如果你想在Bootstrap Table中实现多个表单的新增和删除行，可以使用Bootstrap Table的扩展插件editable。 首先，确保你已经引入了Bootstrap Table和editable插件的JS和CSS文件。然后，在表格头部添加一个新的列，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值