JS实现向表格中动态添加行的方法


Posted in Javascript onMarch 30, 2015

本文实例讲述了JS实现向表格中动态添加行的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码通过表格对象的insertRow方法动态向表格的最顶端添加新的行

<!DOCTYPE html>
<html>
<head>
<script>
function insRow()
{
var x=document.getElementById('myTable').insertRow(0);
var y=x.insertCell(0);
var z=x.insertCell(1);
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br>
<input type="button" onclick="insRow()" value="Insert row">
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
js 表格隔行颜色
Dec 02 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 #Javascript
JS实现控制表格行文本对齐的方法
Mar 30 #Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 #Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 #Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 #Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 #Javascript
Node.js中的流(Stream)介绍
Mar 30 #Javascript
You might like
php不写闭合标签的好处
2014/03/04 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
js切换div css注意的细节
2012/12/10 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
7个jQuery最佳实践
2016/01/12 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
2019/06/06 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
八年级数学教学反思
2014/01/31 职场文书
运动会获奖感言
2014/02/11 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
事假请假条范文
2014/04/11 职场文书
李敖北大演讲稿
2014/05/24 职场文书
学校献爱心活动总结
2014/07/08 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
读后感作文评语
2014/12/25 职场文书
员工手册编写范本
2015/05/14 职场文书
大学开学感言
2015/08/01 职场文书
生活委员竞选稿
2015/11/21 职场文书
python中validators库的使用方法详解
2022/09/23 Python