表格动态追加、插入、删除行

最新推荐文章于 2024-07-10 16:18:57 发布
最新推荐文章于 2024-07-10 16:18:57 发布
阅读量332 收藏
点赞数
分类专栏： html 文章标签： JavaScript HTML ViewUI

<HTML>
<HEAD>
<TITLE>表格动态追加、插入、删除行</TITLE>
</HEAD>
<BODY >
<table id="DetailTable" border="1" width="60%" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" bordercolordark="#ffffffff"  >
 <tr>
    <td width="40%" align="center" bgcolor="#999999">姓名</td>
    <td width="20%" align="center" bgcolor="#999999">性别</td>
    <td width="40%" align="center" bgcolor="#999999">年龄</td>
 </tr>
    <tr>
    <td width="40%" align="center">&nbsp;&nbsp;<input type="text" name="username" style="width:200px"/></td>
    <td width="20%" align="center">
      <select style="width:100px">
          <option value="boy">男</option>
          <option value="girl">女</option>
      </select>
    </td>
    <td width="40%" align="center"><input type="text" name="age" style="width:200px"/></td>
 </tr>
</table>
<table id="TmpTable" style="display:none;">
    <tr>
    <td width="40%" align="center"><input name="msgid" type="radio" value="msgid"><input type="text" name="username" style="width:200px"/></td>
    <td width="20%" align="center">
      <select style="width:100px">
          <option value="boy">男</option>
          <option value="girl">女</option>
      </select>
    </td>
    <td width="40%" align="center"><input type="text" name="age" style="width:200px"/></td>
 </tr>
</table>
<br>
<table border="0" width="96%" align="center" >
 <tr><td align="center">
  <input type=button class="appButton" onClick="doAppend(DetailTable)" value="&nbsp;追&nbsp;加&nbsp;" >
  <input type=button class="appButton" onClick="doInsert(DetailTable)" value="&nbsp;插&nbsp;入&nbsp;" >
  <input type=button class="appButton" onClick="doRemove(DetailTable)" value="&nbsp;删&nbsp;除&nbsp;" >
 </td>
</table>

<script language="javascript">
 function doAppend(obj){
  if(obj==null){
   return;
  }
  rows=obj.rows;
  if(rows==null){
   return;
  }
  srcElem=rows[rows.length-1];
  var tmpTable=TmpTable;
  if(tmpTable==null){
   return;
  }
  var trows=tmpTable.rows;
   if(trows==null){
    return;
   }   
   newrow = obj.insertRow(srcElem.rowIndex+1);
   temprow=trows[0].cloneNode(true);
   newrow.replaceNode(temprow);
  newrow=null;
  tmprow=null;
 }
 function removeAllRow(obj){
  if(obj==null){
   return;
  }
  rows=obj.rows;
  for(i=1;i<rows.length;i++){
   desc=rows[i];
   obj.deleteRow(desc.sectionRowIndex);
    i--  
   rows=obj.rows;
  }
 }
 function doInsert(obj){
  var srcElem=getSelectedRow(obj);
  if(srcElem==null){
   alert("请选择要插入的行");
   return;
  }
  var tmpTable=TmpTable;
  if(tmpTable==null){
   return;
  }
  var trows=tmpTable.rows;
   if(trows==null){
    return;
   }  
   window.status="";
   newrow = obj.insertRow(srcElem.rowIndex);
   temprow=trows(0).cloneNode(true);
   newrow.replaceNode(temprow);
   window.status="";
  
   }
 function doRemove(obj){  
  srcElem=getSelectedRow(obj);
  if(srcElem==null){
   alert("请选则要删除的行");
   return;
  }    
  obj.deleteRow(srcElem.sectionRowIndex);
 }
 function getSelectedRow(obj){
  if(obj==null){
   return null;
  }
  rows=obj.rows;
  if(rows==null){
   return null;
  }
  var field=document.all.msgid;
  if(field==null){
   return null;
  }
  var srcElem=null;
  for(i=0; i<field.length; i++){
   if(field[i].checked){
    srcElem=field[i];
    break;
   }
  }
  if(srcElem==null){
   return null;
  }
  while (srcElem.tagName != "TR"){
   srcElem = srcElem.parentElement;
     }  
  return srcElem;
 }
</script>
</BODY>
</HTML>

Jannay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+element 实现表格的增加行、删除行的功能
葫芦娃的博客
08-26 2万+
功能需求： 1、实现一个表格，可以增加行 ，可以修改每一行的数据； 2、获取选中的行的数据，获取选中行的索引； 3、根据获取的行的索引删除相应的一行的数据。 tableData的数据可以从后台获取。 效果： 代码实现： <template> <div class="tableDate"> <div class="b...
layui点击数据表格添加或删除一行的例子
12-12
数据表格 t2 = { elem: '#test2', data: tableData2, page: false, width: $(parent.window).width()-50, cols: [[ {type:'checkbox',field:'id'}, {field:'cstMoldNo', title: '客户模号',edit:'text'}, {field:'cstProdName', title: '产品名称',edit:'text'}, {fiel
javascript 动态添加表格行
j2ee实战的点点滴滴
06-14 2482
动态添加表格行 文/Ray 表格部分代码如下：testTbl" border=1>tr1">box1">第一行tr2">box2">第二行box3">第三行动态添加表行的javascript函数如下：function addRow(){//添加一行var newTr = testTbl.insertRow(
element el-table实现表格动态增加/删除/编辑表格行，带校验规则
最新发布
qq_61869009的博客
07-10 1898
element el-table实现表格动态增加/删除/编辑表格行，对每一行数据增加校验规则
动态增加表格的行
huzijia888的博客
11-20 488
双击加号按钮可以增加表格行数 table{ border:1px solid red; } td{ border:1px solid blue; } function add(){ var table1=document.getElementById("table1"); var tr1=document.createElement("TR"); t
表格动态添加行操作
井底下的猪
12-06 114
[code="html"] 无标题文档 /* 动态添加table.将table中的text的值存入另一text中，在后台得到另一text的值 注意：1。OnChanged将“text的值存入另一text中”。如果此事件写入后台代码，将得不到。因为被postback掉了。 故先存...
js简单的表格添加行和删除行操作示例
10-26
在这段示例代码中，展示了如何使用JavaScript结合jQuery库来实现对HTML表格的基本操作——添加行和删除行。 ### 知识点一：基本的HTML结构 示例代码提供了一个简单的HTML表格结构，包含一个有边框的表格（border='...
jquery案例，为表格动态添加行
10-21
要使用jQuery动态添加行，我们可以先创建一个新的`<tr>`元素，然后在其中填充`<td>`元素，最后将其插入到表格中。以下是一个基本的添加行示例： ```javascript // 创建新行 var newRow = $("<tr><td>新数据1</td>...
C#中DataGridView动态添加行及添加列的方法
09-03
在实际开发中，我们可能需要根据不同的需求动态地添加或删除行和列，以适应变化的数据结构。下面我们将详细介绍如何在C#中实现`DataGridView`动态添加行和列的方法。 首先，让我们来看看如何动态添加列。在`...
动态添加表格数据（jQuery、Vue）
01-08
### jQuery动态插入表格数据 #### 1. 效果图 这里假设有一个表格，用户可以查看并编辑图书信息，包括书籍名称、作者、出版日期、价格和购买数量。 #### 2. 参考代码 ```javascript var books = [ {id: 1, author:...
Layui表格添加行删除保存代码.zip
07-05
Layui表格添加行删除保存代码是一款可用于对表格数据快速维护，展示修改功能，灵活自如。
table动态增加一行
08-29
table动态增加一行，点击增加可增加，点击删除可以进行删除
c# tablelayoutpanel 动态增加和删除列 已测试通过 动态合并单元格 动态添加控件
11-10
c# tablelayoutpanel 动态增加和删除列 已测试通过 动态合并单元格 动态添加控件
jquery实现表格行与列的动态增加和删除，附获取表格内容（字符串、json）格式
07-20
在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现都不符合自己的需要，所以就动手改写了一份简单的diy表格。目前实现动态增加 删除最后一行与最后一列，获取表格内填写的input数据(最简洁的代码实现)
element-UI table动态增加列，动态增加行，动态合并行。选择编辑表头、行数据
KOCCarl的博客
07-01 9824
文章目录主要内容表格效果表格代码数据格式需要表格数据格式右键菜单数据格式实现方法表格右键点击菜单事件表格单击事件动态添加行、列表格每行单击事件行合并事件 主要内容 项目使用vue+element-UI实现 基础表格 element-ui官网查看。项目基于基础表格扩展了动态添加行、列。表头、行内数据动态编辑、选择、修改。还涉及到了动态添加行时，行动态合并。其中还运用到了 v-contextmenu. 插件，方便用户右键操作。 表格效果 表格代码 <el-table :data="tableData"
动态创建DataTable,GridView创建多表头，表头跨行或跨列合并，创建计算列及列内容自适应等...
diehe5608的博客
11-15 428
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { GridView1.DataSource = FormatDT(); GridView1.DataBind(); } ...
java 表格 增加行_java 使用 pageoffice 对Word文档中Table动态添加行，合并单元格并赋值...
weixin_39638305的博客
02-16 585
这次我们介绍一下如何给原有的word 表格动态添加行，并且实现单元格合并以及赋值。一、核心代码 二、具体实现步骤1、先在word 模板中插入一个 3行5列的表格，并设置书签PO_table(注:插入书签的时候一定要先选中整个table，然后再点击插入书签按钮进行插入。) 2、实现代码import="com.zhuozhengsoft.pageoffice.*,com.zhuozhengsoft....
在vue中通过js动态绘制table，并且合并连续相同内容的行，支持点击编辑单元格内容，新增单元行，删除单元行，以及还原被合并的单元格。
青莳的博客
12-18 927
实现效果如下，同时还获取了当前单元格所在行里面指定的某一列的数据内容（比如可以获取当前行的id，以此来给后端修改数据库中的数据），注意行是从表头下面开始的，行和列的下标都是从0开始。const numCols这里给出了两种合并表格的逻辑，第一个是只会对前三列执行合并逻辑，而第二个会对所有列执行合并逻辑。下面是两种逻辑的合并效果图。接下来是完整的js方法，实现了点击编辑单元格内容，新增单元行，删除单元行，以及还原被合并的单元格。
单击“增加一行”按钮，可以在书名为“60个瞬间”的所在行前插入一行，新插入行的价格一列居中显示。 单击“删除第2行”按钮可把书名为“看得见风景的房间”一行删除单击“修改标题样式”按钮，可以设置标题行居中显示，字体加粗单元格的背景颜色变为“#cccccc' 单击“复制最后一行”按钮，复制书名为“60个瞬间”所在行，并且追加到表格的末尾。
06-07
`copyLastRow`函数可以复制书名为“60个瞬间”所在行，并且追加到表格的末尾。 您可以根据需要修改代码中的内容以及实现方式。同时，建议使用CSS来实现样式的修改，以提高代码的可读性和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值