利用javaScript动态增加表格行，删除表格行
示例：
- - - - - - - - - - - -
<body>
<input type="button" value="create" οnclick="createTr();">
<table border='1' id="t" >
</table>
<input type="button" value="提交" οnclick="okss();" />
</body>
<script type="text/javascript">
function createTr()
{
var tab = document.getElementById("t");
//create tr
for(var j=0;j<3;j++) {
var tr = tab.insertRow();
//create td
var td1 = tr.insertCell(0);
td1.innerHTML = "test"+j;
var td2 = tr.insertCell(1);
td2.innerHTML = "<input type='text' id='td_"+j+"' class='input' size='5' >";
var td3 = tr.insertCell(2);
td3.innerHTML = "<input type='button' value='删除' class='button_2008' οnclick='deleteRow(this);'>";
}
}
//del row
function deleteRow(btn){
var tr = btn.parentNode.parentNode;
t.deleteRow(tr.rowIndex);
}
//submit
function okss()
{
var ss = document.getElementById('td_0').value;
var ss1 = document.getElementById('td_1').value;
var ss2 = document.getElementById('td_2').value;
alert("----"+ss+"\t"+ss1+"\t"+ss2);
}
</script>
- - - - - - - - - - - -
利用javaScript动态增加表格行，删除表格行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Table 对象得方法 </TITLE>
<script language="JavaScript">
var intRowIndex = 0;
function insertRow(tbIndex)
{
var objRow = myTable.insertRow(tbIndex);
var objCel = objRow.insertCell(0);
objCel.innerText = document.myForm.myCell1.value;
var objCel = objRow.insertCell(1);
objCel.innerText = document.myForm.myCell2.value;
objRow.attachEvent("onclick",getIndex);
objRow.style.background = "pink";
}
function deleteRow(tbIndex)
{
myTable.deleteRow(tbIndex);
}
function getIndex()
{
intRowIndex = event.srcElement.parentElement.rowIndex;
pos.innerText = intRowIndex;
}
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY οnlοad="pos.innerText=intRowIndex;">
<h2>Table对象得方法</h2>
<hr>
当前位置：<span id="pos"></span>
<table id="myTable" border=1>
<tr οnclick="getIndex()">
<td>HTML</td>
<td>Css</td>
</tr>
<tr οnclick="getIndex()">
<td>JavaScript</td>
<td>VBScript</td>
</tr>
</table>
<form name="myForm">
第一栏：<input type="text" name="myCell1" value="CGI"><br>
第二栏：<input type="text" name="myCell2" value="ASP"><br>
<input type="button" οnclick="insertRow(intRowIndex)" value="插入行">
<input type="button" οnclick="deleteRow(intRowIndex)" value="删除行">
<input type="button" οnclick="insertRow(myTable.rows.length)" value="添加行" >
</form>
</tr>
</BODY>
</HTML>
intRowIndex是全局变量，记录鼠标选择得行。insertRow()函数可以在传入得参数前插入一个表格行，
转载于:https://www.cnblogs.com/sky100/articles/1276108.html
利用javaScript动态增加表格行，删除表格行相关推荐
- Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
最近做的项目中有一个需求就是要求在线填写表格内容时,不够的话可以动态添加一行,我这里用的jQuery来实现,下面是我项目截图展现: 当点击"添加输入框"按钮时,就会自动添加一行 下 ...
- 利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
- 【shell】笔记|去重复行|删除匹配行|反选删除|反向显示|加减乘除
目录 配置 bash Shell忽略命令大小写 |按"上"键显示该命令的历史 shell 删除匹配行 shell 获取结果中的第n列,第n行 grep过滤 shell 注释块 Li ...
- 利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
- 利用反射动态修改 EasyPoi 导出Excel表格标题名称
EasyPoi 动态修改表格标题名称 需求 代码实现 1.实体类 @Data @Accessors(chain = true) public class AccountVO implements Se ...
- PyMySQL设计-进销存系统-多彩美化 删除表格 创建表格
目录 颜色 创建表格 删除表格 总目录 本文持续更新 颜色 相信但你一目扫过去,只有一种单调的颜色,肯定不太喜欢吧?那就给它配上颜色! pip install colorama colorama库,可 ...
- jquery Datatables 行数据删除、行上升、行下降功能演示
Datatables 是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 官方网站:http://www.datatables.net Datatables ...
- sed 删除匹配行的前后行
2019独角兽企业重金招聘Python工程师标准>>> 删除匹配行的前后行 删除匹配行的下一行 sed -ne 'p;/niyaopipeideneirong/n' nidewenj ...
- JavaScript学习笔记：动态添加与删除表格行
文章目录 一.添加表格行与单元格 二.动态删除表格行与单元格 三.案例演示1 四.案例演示2 一.添加表格行与单元格 Javascript可以控制table,动态的插入行和单元格.rows保存着< ...
- javascript动态创建表格：新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
最新文章
- Ajax、jQuery基础入门视频教程
- 模型学习 - RNN及一系列发展
- PCIe是什么？PCIe标准和PCIe布线规则总结概述
- c语言创建字符树,使用C语言构建基本的二叉树数据结构
- 专题开发十三：JEECG微云快速开发平台-附录
- 简单mysql数据库备份一例及crontab说明
- android 自定义特效,Android自定义FloatingText仿点赞+1特效
- c语言 数据结构 多为整数带括号四则运算,用C语言实现 多位整数的四则运算，用栈，例如56*（12+20）-102/2...
- 【声学基础】概述——振动学
- @excel 注解_SpringBoot中关于Excel的导入和导出
- python finally语句里面出现异常_python try except语句出现异常
- RNA_seq(1)植物转录组实战（上)之salmon进行索引建立和转录组定量
- NZ源码交易平台虚拟交易系统(商家版) 高仿淘码网模板
- 中文乱码解决办法（java）
- 广州黄埔香雪地铁口总价35万一套。
- python中def func是什么意思_python中的函数def和函数的参数
- Android Studio 如何快速把一个类中的所有同一个变量名统一改(同时工程项目里的文件名被改）
- 【C语言编程】 配对碱基链
- Zabbix proxy
- 《SpringBoot2.0 实战》系列-整合FlyingSaucer + thymeleaf 实现模板文件转pdf打印