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检查页面上有无重复id的实现代码
Jul 17 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
JSONP基础知识详解
Mar 19 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 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提取字符串中网站url地址的方法
2014/12/03 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
关于Keras Dense层整理
2020/05/21 Python
如何解决python多种版本冲突问题
2020/10/13 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
九年级科学教学反思
2014/01/29 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
工地标语大全
2014/06/18 职场文书
中文专业求职信
2014/06/20 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android