添加行并删除行

最新推荐文章于 2024-06-08 15:31:51 发布
最新推荐文章于 2024-06-08 15:31:51 发布
阅读量1k 收藏
点赞数
分类专栏： js 文章标签： input list generator button function html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuantian868/article/details/1495429
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
 function doAdd()
 {
  otb = document.getElementById("aa");  //定义内表格对象otb。 
  
  var rowslegth = otb.rows.length;  //获取当前层内表格的行数。
  rowslegth = rowslegth +1;
  oTr = otb.insertRow(otb.rows.length);
  if(rowslegth%2!=0)
  {
  oTr.style.backgroundColor='#FFFFFF';
  }
  else
  {
  oTr.style.backgroundColor='#EFF7F9';
  }
  oTr.className = 'zi';
  var Rowsid = otb.rows.length;
  
  oTd =   oTr.insertCell(0);//插入列
  oTd.align = 'right';
  oTd.className = 'list_td';
  oTd.innerHTML="<select name='component_grid:_ctl"+rowslegth+":COMPONENT' id='component_grid__ctl"+rowslegth+"_selCOMPONENT' οnchange='ChangeCOMPONENT(this.options(this.selectedIndex).value,this.id)' size='1'><option selected='selected' value='0'>选择构件</option></select>";

  oTd =   oTr.insertCell(1);
  oTd.align = 'left';
  oTd.className = 'list_td';
  oTd.innerHTML = "asdf";
  
  oTd =   oTr.insertCell(2);
  oTd.align = 'center';
  oTd.className = 'list_td';
  oTd.innerHTML="<select name='component_grid:_ctl"+rowslegth+":selColor' id='component_grid__ctl"+rowslegth+"_selColor' size='1' οnchange='ChangeColor(this.options(this.selectedIndex).value,this.id);'><option selected='selected' value='0'>选择颜色</option></select>";
  
  oTd =   oTr.insertCell(3);
  oTd.align = 'center';
  oTd.className = 'list_td';
  oTd.innerHTML="<input name='component_grid:_ctl"+rowslegth+":txtNum' type='text' id='component_grid__ctl'+rowslegth+'_txtNum' size='10' />";
  
  
  oTd =   oTr.insertCell(4);
  oTd.align = 'center';
  oTd.className = 'list_td';
  oTd.innerHTML="<input name='component_grid:_ctl"+rowslegth+":txtLength' type='text' id='component_grid__ctl"+rowslegth+"_txtLength' size='10' />";
  
  
  oTd =   oTr.insertCell(5);
  oTd.align = 'center';
  oTd.className = 'list_td';
  oTd.innerHTML="<input name='component_grid:_ctl"+rowslegth+":txtWidth' type='text' id='component_grid__ctl"+rowslegth+"_txtWidth' size='10' />";
  
  
  oTd =   oTr.insertCell(6);
  oTd.align = 'center';
  oTd.className = 'list_td';
  oTd.innerHTML="<textarea name='component_grid:_ctl"+rowslegth+":txtDES' rows='2' cols='20' id='component_grid__ctl"+rowslegth+"_txtDES'></textarea>";
  
  
  oTd =   oTr.insertCell(7);
  oTd.align = 'center';
  oTd.className = 'list_td';
  oTd.innerHTML="<a href='#' id='component_grid__ctl"+rowslegth+"_del' οnclick='DelRow(this);return false;'>删除</a>";
  
  oTd =   oTr.insertCell(8);
  oTd.align = 'center';
  oTd.className = 'disTd';
  oTd.innerHTML="<input name='component_grid:_ctl"+rowslegth+":hidCOMPONENT_ID' id='component_grid__ctl"+rowslegth+"_hidCOMPONENT_ID' type='hidden' value='' />";
  
  oTd =   oTr.insertCell(9);
  oTd.align = 'center';
  oTd.className = 'disTd';
  oTd.innerHTML="<input name='component_grid:_ctl"+rowslegth+":hidPROJECT_SHELFTYPE_COMPONENT_ID' id='component_grid__ctl"+rowslegth+"_hidPROJECT_SHELFTYPE_COMPONENT_ID' type='hidden' value='' />"; 
   

 }
 function DelRow(tableid)
 {
  objT=document.getElementById(tableid);
  if(objT.rows.length==1)
  {
   alert("不可以删除首行");
   return;
  }
  else
  {
   if(confirm("确定要删除吗?"))
   {
    objT.deleteRow();
   }
  }
  
 }
  </script>
</HEAD>

<BODY>
<input type="button" value="add" onClick="doAdd();">
<input type="button" value="del" onClick="DelRow('aa')">

<table id="aa" width="60%" border=1>
<tr><td>ssdddddd</td></tr>
</table>
</BODY>
</HTML>
 

xuantian868
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html动态添加行
04-14
这是一个简答的HTML的动态添加行代码示例,利用jquery编写!
点击添加行
weixin_44540140的博客
06-18 1329
假设插件无法达到需求的效果,比如在表格中的行可以新增行,行中的单元格绑定下拉框等过于复杂的需求就只能自己写. 一步:选中需要绑定事件的对象 比如我这个项目添加行的对象是一个按钮,点击一次添加一行,首先通过jQuery选中按钮添加点击事件,上图的选择方式通过ID选择,id通过某种规则进行拼接,主要为了节省代码量,因为需要点击添加行的表格可能不止一个,而为了避免重复出现相同的代码,于是通过for循环...
[word] word表格中插入行的四种种方法详解 #职场发展#微信
最新发布
2401_85471920的博客
06-08 1380
word表格中插入行的四种种方法详解Word表格有时候行数不够，需要插入行。Word表格中插入行有四种方法，下面小编给大家总结一下。1.把光标定位在任意一行2.点击鼠标右键，点击【插入行】图11.在表格的任意处单击，激活【表格工具】2.点击表格工具下方的【布局】3.点击【插入】按钮图2你可以选择在上方插入行，也可以选择在下方插入行1.把光标定位在表格右侧边缘的段落标记处2.按下回车键，按一次回车键就插入一行，按两下回车键就插入两行。图31.把光标放在表格线上，直到出现如图所示的图标。
js添加行
zyzn1425077119的博客
11-28 682
onclick="ClearAllSign()" />  -->                          type='hidden' id='txtTRLastIndex' value="1" />                   id="SignFrame">                      序号             衣服类型           
js将追加的某行tr删除
IT_xiaocao的博客
01-07 845
Html代码： table id="show1" style=" width: 151px;height: 63px;border: 2px;">      表名 --> table> Js代码：知识涉及复选框的选中后放在数组中      和        对追加的行进行单行删除 script type="text/javascript"> $(document).ready(func
添加行和删除行
有点騒的程序员
02-17 672
开发工具与关键技术：VS2015，浏览器；C# 撰写时间：2019-02-05 我们经常会碰到这种功能就是要在原来的基础上添加相同格式的一行，样式如下图所示。有添加一行就必会有删除一行，而删除行有一个这样的逻辑就是在删除到只剩一行的时候是不能删除的了，必须要留一行。 首先我们要设计一个添加一行和删除一行的按钮，给这两个按钮onclick事件代码详情看截图代码 然后在设计添加一行里面...
js简单的表格添加行和删除行操作示例
10-26
主要介绍了js简单的表格添加行和删除行操作,需要的朋友可以参考下
js动态添加 删除行
12-21
js动态添加 删除行
bootstrap添加删除行.zip
07-27
在"bootstrap添加删除行.zip"这个压缩包中，包含了实现基于Bootstrap的表格功能的必要资源，使得用户可以轻松地进行表格行的增删操作。下面我们将详细探讨这些知识点。 首先，`bootstrap.css`是Bootstrap的核心样式...
Js实现动态添加删除Table行示例
10-26
主要介绍了Js动态添加删除Table行的具体实现,需要的朋友可以参考下
js动态添加行和删除行
08-24
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
js动态添加表格数据使用insertRow和insertCell实现
12-03
效果图: 代码: js动态添加表格数据_2.html 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> [removed] var mailArr = [ { “title”: “一个c#问题”, “name
如何实现Hibernate树行结构的删除
donggz_renji
03-14 142
在同一张表存在所属关系的树形结构,如何实现删除某个节点同时把该节点下的所有子节点一起删除 下边是部分结构说明 CstBomMasterTest.hbm.xml java类文件 public class CstBomMasterTest i...
我的NHibernate之行（二）：增删改
张连海
09-14 1424
我们常常所说的一个工作单元，通常是执行1个或多个操作，对这些操作要么提交要么放弃/回滚。如果只查询数据，不改变它的值，就不需要提交(或者回滚)到数据库。对于查询操作，内容比较多，这次就不涉及。本文仅仅介绍一下NHibernate的增删改操作。
html添加行
helloWorld_LHT的博客
02-14 750
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-3.0.0.min.js&qu
超级简单Table表格添加,删除行
Love丶兰的博客
08-18 9979
Table表格添加,删除行
DataTable添加列和行的三种方法
热门推荐
杨千羽的学习历程
11-03 5万+
DataTable添加列和行的三种方法 #region 方法一:  DataTable tblDatas =new DataTable("Datas");  DataColumn dc =null;  dc = tblDatas.Columns.Add("ID", Type.GetType("System.Int32"));  dc.AutoIncrement =true;/
表格插入行与删除行示例
人生如梦 梦如人生
09-22 133
&lt;html&gt; &lt;head&gt; &lt;title&gt;表格插入行与删除行示例&lt;/title&gt; &lt;script type="text/javascript"&gt; //参数列表[表格Id,复制行的索引,标题行数,表单Id] function clickInsert(inputTable,rowId,titleRow,...
QTableWidget添加删除按钮删除行
03-29
在QTableWidget中添加删除按钮，可以使用QTableWidgetItem以及QPushButton来实现。具体步骤如下： 1. 在QTableWidget中插入QPushButton。可以使用setCellWidget方法，在指定单元格中插入QPushButton。 ``` QPushButton *btnDelete = new QPushButton("删除"); ui->tableWidget->setCellWidget(row, col, btnDelete); ``` 2. 为QPushButton添加点击事件。可以使用connect方法，将QPushButton的clicked信号连接到自定义的槽函数中。 ``` connect(btnDelete, SIGNAL(clicked(bool)), this, SLOT(onBtnDeleteClicked())); ``` 3. 在槽函数中获取当前行，并删除该行。可以使用sender方法获取触发该事件的QPushButton对象，然后使用QTableWidget的removeRow方法删除该行。 ``` void MainWindow::onBtnDeleteClicked() { QPushButton *btnDelete = qobject_cast<QPushButton *>(sender()); if (btnDelete) { int row = ui->tableWidget->indexAt(btnDelete->pos()).row(); ui->tableWidget->removeRow(row); } } ``` 完整代码如下： ``` void MainWindow::initTableWidget() { ui->tableWidget->setColumnCount(2); ui->tableWidget->setHorizontalHeaderLabels(QStringList() << "姓名" << "性别"); QStringList names = {"张三", "李四", "王五", "赵六", "钱七"}; QStringList genders = {"男", "女", "男", "女", "男"}; for (int i = 0; i < names.size(); i++) { int row = ui->tableWidget->rowCount(); ui->tableWidget->insertRow(row); QTableWidgetItem *item1 = new QTableWidgetItem(names[i]); QTableWidgetItem *item2 = new QTableWidgetItem(genders[i]); ui->tableWidget->setItem(row, 0, item1); ui->tableWidget->setItem(row, 1, item2); QPushButton *btnDelete = new QPushButton("删除"); ui->tableWidget->setCellWidget(row, 2, btnDelete); connect(btnDelete, SIGNAL(clicked(bool)), this, SLOT(onBtnDeleteClicked())); } } void MainWindow::onBtnDeleteClicked() { QPushButton *btnDelete = qobject_cast<QPushButton *>(sender()); if (btnDelete) { int row = ui->tableWidget->indexAt(btnDelete->pos()).row(); ui->tableWidget->removeRow(row); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值