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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 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
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
Sql面试题
2013/03/20 面试题
老师对学生的评语
2014/04/18 职场文书
优秀教师演讲稿
2014/05/06 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
十周年庆典策划方案
2014/06/03 职场文书
论群众路线学习笔记
2014/11/06 职场文书
安全保证书
2015/01/16 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书