通过javascript添加一行
<html>
<head>
<title>添加新的行</title>
</head>
<body>
<div onclick="addTr()">添加</div>
<table id="myTable" border="1">
<input type="hidden" value="0" id="myInput"/>
<tr id="myTr0">
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
<script>
/**
* 添加一行
*/
function addTr(){
var tab = document.getElementById("myTable");
var rowNum = tab.rows.length;
var myInput=document.getElementById("myInput").value;
myInput=parseInt(myInput)+1;
document.getElementById("myInput").value=myInput;
var newTr = tab.insertRow();//生成一个新的行
newTr.id="tr"+myInput;
newTd0=newTr.insertCell(0);//生成一个新的列
newTd0.innerText="AAAA";
newTd1=newTr.insertCell(1);
newTd1.innerText="男";
newTd2=newTr.insertCell(2);
newTd2.innerHTML="<span onclick=delRow(this)>删除"+myInput+"</span>";
document.getElementById("myTable").lastChild.appendChild(newTr); //添加到表格中
}
/**
* 删除一行
*/
function delRow(obj){
var tab = document.getElementById("myTable");
var parNode = obj.parentNode.parentNode.rowIndex;
tab.deleteRow(parNode);//删除一行
}
</script>
通过javascript添加一行的更多相关文章
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作
$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...
- js实现在表格中删除和添加一行
<!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...
- 点击按钮在表格的某一行下，在添加一行(HTML+JS)
使用js在指定的tr下添加一个新的一行newTr html代码: <table> <tr> <td>用户名:</td> <td><in ...
- JQUERY动态绘制表格，实现动态添加一行，删除一行
HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...
- 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选
页面点击按钮添加一行 删除一行 全选 反选 全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...
- jquery中table里面的tr里的input添加一行，并且第一列autoincrement
实现添加一行并且第一列由A0开始autoincrement,代码如下(在文件的同一个文件夹下添加一个jquery.js文件): <!DOCTYPE html PUBLIC "-//W3 ...
- 利用jquery表格添加一行并在每行第一列大写字母显示实现方法
表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...
- 仅仅需手动添加一行代码就可以让Laravel4执行在SAE (v. 1.0.0)
Github:https://github.com/chariothy/laravel4-sae (已更新至v1.1.0) laravel4-sae (v. 1.0.0) 仅仅需手动添加一行代码就可以 ...
随机推荐
- GOROOT、GOPATH和project目录说明
go env环境查看 用go env 可查看当前go环境变量. $ go env GOARCH="amd64" GOBIN="" GOEXE="&qu ...
- 无责任Windows Azure SDK .NET开发入门篇（一）：开发前准备工作
Windows Azure开发前准备工作 什么是 Azure SDK for .NET?微软官方告诉我们:Azure SDK for .NET 是一套应用程序,其中包括 Visual Studio 工 ...
- eclipse中Cannot change version of project facet Dynamic Web Module to 3.0的问题解决
在做web配置的时候,希望将web Module(Web模块)更换为3.0,发生如下错误: cannot change version of project facet Dynamic Web Mod ...
- UML基础 UML对象图解析
本节向大家介绍一下UML对象图方面的内容,主要包括UML对象图概念介绍,表示法和用途等,希望通过本节的介绍大家对UML对象图有全面的认识,下面让我们一起来学习吧. UML对象图简介 对象图(Objec ...
- Java基础——iO（二）
接着上一篇,继续做学习笔记.学IO这块,突然找到一点好处,好像以后操作电脑,尤其是电脑里的文件啥的,可以很少的用鼠标了.添加.修改.删除啥的,几行代码就可以搞定了.这只是我一个初学者的一点小心思,IO ...
- Guava RateLimiter实现接口API限流
一.简介 Guava提供的RateLimiter可以限制物理或逻辑资源的被访问速率.RateLimit二的原理类似与令牌桶,它主要由许可发出的速率来定义,如果没有额外的配置,许可证将按每秒许可证规定的 ...
- 跨域CORS 头缺少 'Access-Control-Allow-Origin'
今天遇到一个跨域的问题找了好久的资料错误如下: 解决之后: 控制层 加上这两行代码就好啦: @RequestMapping(value = "",method = RequestM ...
- Redis常用数据类型及使用场景
Redis最为常用的数据类型 字符串(String) 字符串列表(list) 字符串集合(set) 哈希(hash) 有序的字符串集合(sorted set) String(字符串) 字符串是最基本的 ...
- JS 作用域 p1
引用<你不知道的JavaScript>中的话,如下: 负责收集并维护由所有生命的标识符(变量)组成的一系列查询并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限. 那么作用 ...
- Git 及 GitHub 使用
Git bash 的常用命令 1. pwd 查看当前所在目录 2. cd cd .. 返回上一级 cd 目录 进入对应的目录 3. ls 查看当前文件夹的内容 ...