通过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) 仅仅需手动添加一行代码就可以 ...
随机推荐
- 玩转mongodb（七）：索引，速度的引领（全文索引、地理空间索引）
本篇博文主要介绍MongoDB中一些常用的特殊索引类型,主要包括: 用于简单字符串搜索的全文本索引: 用于球体空间(2dsphere)和二维平面(2d)的地理空间索引. 一.全文索引 MongoDB有 ...
- DOS在这里
转自: http://blog.csdn.net/rheostat/article/details/8043835 在右键菜单中添加Dos快捷通道-dos在这里 在右键菜单中添加 Dos 窗体 不用每 ...
- 版本管理（一）之Git和GitHub的区别（优点和缺点）
Git 简介 https://www.yiibai.com/git/getting-started-git-basics.html Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或 ...
- Quartz2D截屏
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
- webpack4+react多页面架构
webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务 ...
- [转]Microsoft SQL SERVER 2008 R2 REPORT SERVICE 匿名登录
本文转自:https://www.cnblogs.com/Zouzhe/p/5736070.html SQL SERVER 2008 R2 是微软目前最新的数据库版本,在之前的SQL SERVER 2 ...
- 无责任Windows Azure SDK .NET开发入门（二）：使用Azure AD 进行身份验证
<編者按>本篇为系列文章,带领读者轻松进入Windows Azure SDK .NET开发平台.本文为第二篇,将教导读者使用Azure AD进行身分验证.也推荐读者阅读无责任Windows ...
- 深入浅出Mybatis技术原理与实战（杨开振）(带详细书签) PDF 下载 高清 完整版+源码
(杨开振) 源码 IDE eclipse 建表语句也在里面 电子书+源码地址
- 【 js 基础 】【 源码学习 】 深浅拷贝
underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...
- 【代码笔记】iOS-播放从网络上下载的语音
代码: ViewController.m #import "ViewController.h" //录音 #import <AVFoundation/AVFoundation ...