JavaScript 动态添加删除表格行

最新推荐文章于 2018-09-29 08:41:01 发布
最新推荐文章于 2018-09-29 08:41:01 发布
阅读量1.6k 收藏
点赞数
文章标签： javascript input function xhtml html border

http://blog.nettoapp.com/article.asp?id=172

动态添加、删除行，分别通过insertRow，deleteRow方法实现，显示行号，通过rowIndex属性获得，基本可以动态实现相关功能。原代码如下：

<!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>动态添加删除表格</title>

<Script Language="Javascript">
var cGetRow=-99999;

function AddRow()
{
//添加一行
var newTr = tab1.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4" onClick="GetRow()">';
newTd1.innerText= '新增加行';
}

function DelRow(iIndex)
{
//删除一行
if(iIndex==-99999)
  alert("系统提示：没有选中行号!");
else  
  tab1.deleteRow(iIndex);
}

function GetRow()
{
//获得行索引
//两个parentElement分别是TD和TR哟，rowIndex是TR的属性
//this.parentElement.parentElement.rowIndex
    cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}

function ShowRow()
{
//显示行号
alert(cGetRow);
//alert(document.getElementsByTagName("tr").length);
}

</script>
</head>

<body>
<table id="tab1" border=1>
   <tr id="tr1">
  <td width=6%><input type=checkbox id="box1" onClick="GetRow()"></td>
  <td id="a">第一行</td>
   </tr>
   <tr id="tr2">
  <td width=6%><input type=checkbox id="box2"  onClick="GetRow()"></td>
  <td id="b">第二行</td>
   </tr>
   <tr id="tr3">
  <td width=6%><input type=checkbox id="box3"  onClick="GetRow()"></td>
  <td id="c">第三行</td>
  </tr>
</table>

<input type="submit" name="Submit" value="AddRow" οnclick="javascript:AddRow();">
<input type="submit" name="Submit" value="DelRow" οnclick="javascript:DelRow(cGetRow);">
<input type="submit" name="Submit" value="ShowRow" οnclick="javascript:ShowRow();">  
</body>
</html>

xiaoxin888888
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态添加和删除表格的行（HTML源码）
qq_43109561的博客
05-26 1732
实现： （除去操作所占的一行）点击添加一行为表格追加一行，点击删除一行删除掉表格的最后一行，表格内容剩余一行时不能再删除。 实现效果： 初始： 添加行： 删除到最后一行时再删除： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl...
javascript实现动态添加删除表格行
04-13
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
动态添加和删除表格行！
ebonyzhang
11-14 669
这几天一直再做动态添加表格行，也查阅了许多资料，许多例子可以借鉴，但是还是觉得真正有用的是运用于项目中的。 以下是代码示例：       //添加新行     $(document).ready(function() {        //隐藏模板tr        //$(".tb tr").eq(0).hide();        //添加序号        //var tb_j
jQuery 动态添加或删除表格行
03-27
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
JavaScript动态操作表格，添加，删除行、列及单元格
06-22
JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
JavaScript动态添加删除表格行
03-31
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
基于JavaScript实现动态添加删除表格的行
12-28
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
JavaScript 动态添加表格行 使用模板、标记
10-29
在客户端使用JavaScript动态添加表格行，先到网上找了相关的资料，发现有现成做好的组件，发现它只能够满足比较简单的要求。
JS动态添加删除<table>行
weixin_33743661的博客
11-08 88
//动态添加行 function addRow(){ var table = document.getElementById("tableID"); var newRow = table.insertRow(); //创建新行 var newCell1 = newRow.insertCell(); //创建新单元格 newCell.innerHTML = "...
javascript动态生成表格，并实现对表格行的添加和删除
KevinLiuu的专栏
07-05 1153
表格相关 function add_row(){ if ((document.getElementById("name").value=="")||(document.getElementById("pass").value=="")) {alert("值不能为空"); return 0;} var tableobj=document.getElementById("table_1")
javascript实现动态增加行删除行.
liuchao1211的专栏
11-11 703
"-//W3C//DTD HTML 4.0 Transitional//EN">    New Document   "javascript">    function addRow()    {        //增加一行         var tr = modifyTable.insertRow(modifyTable.rows.length); 
Javascript 动态添加删除表格行
gideal_wang的专栏
05-20 5306
用JS实现动态添加或删除表格的行，有两种方法：（1）添加：用HTML DOM Table对象的insertRow()方法创建TableRow对象，一个                 TableRow对象代表一个标签，再调用TableRow对象的insertCell()方法                 创建TableCell对象，一个TableCell对象代表一个标签     
js动态增加行 删除行
03-17 5800
//动态增加行 function addRow(tab){ var title = ""; var table = document.getElementById(tab); var newRow = table.insertRow();// var newCell = newRow.insertCell(); if(tab=="projectTab"){ title = $("#p
利用javascript动态添加表格行以及删除表格行
summerhmy的博客
09-29 2万+
首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。 如图： 对应的html代码： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;tit...
jQuery实现表格行的动态增加与删除(改进版)
huangxiaoya1993的专栏
07-30 1万+
http://www.blogjava.net/absolutedo/archive/2009/03/13/259488.html
关于用jquery 动态增加、删除表格的行，列操作。
whax
07-05 1万+
jquery 动态增加、删除表格的行，列操作。
Vue+element 实现表格的增加行、根据索引删除行的功能
热门推荐
luzhaopan的博客
08-01 4万+
功能需求：1、实现一个表格，可以增加行 ，可以修改每一行的数据；                   2、获取选中的行的数据，获取选中行的索引；                   3、根据获取的行的索引删除相应的一行的数据。 tableData的数据是写死的，具体开发可以从后台获取。 具体的代码实现如下： &lt;template&gt; &lt;div class="tab...
动态添加删除table页面一行input表格
蜗牛学习笔记
04-15 2万+
之前写过两篇关于HTML页面添加结点，删除结点的博文。今天偶然看到一个网友询问JSP页面上动态给表格增加行，删除行，碰巧那会儿比较闲，就动手写了一下，记录下来，希望能帮到需要的朋友们。 上面的代码中，首先在body中构造了一个table，为了方便后续的操作，我们给table添加了thead 和 tbody 标签，thead标签标示的是表格头，tbody标签标示的是表格主体。 示例中的表格，共有三列，第一列 first name，第二列 last name，第三列为操作列。 操作列中，包含两个操作，一个是给
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、付费专栏及课程。

余额充值