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 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
详解JavaScript执行模型
Nov 16 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
解决vue跨域axios异步通信问题
2019/04/17 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python3+django2.0+apache2+ubuntu14部署网站上线的方法
2018/07/07 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
树莓派极简安装OpenCv的方法步骤
2019/10/10 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
为什么称python为胶水语言
2020/06/16 Python
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
国家励志奖学金获奖感言
2014/01/09 职场文书
打架检讨书400字
2014/01/17 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
个人廉洁自律总结
2015/03/06 职场文书