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 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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根据IP地址获取所在城市具体实现
2013/11/27 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
一种JavaScript的设计模式
2006/11/22 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python验证码识别的方法
2015/07/10 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Django框架封装外部函数示例
2019/05/28 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
深圳-东方伟业笔试部分
2015/02/11 面试题
Structs界面控制层技术
2013/10/11 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
详解Redis复制原理
2021/06/04 Redis