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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
js正则匹配markdown里的图片标签的实现
Mar 24 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的无限分类实现想法~
2007/01/02 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
jquery each()源代码
2011/02/14 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python中的包和模块实例
2014/11/22 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python os.path模块常用方法实例详解
2018/09/16 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python操作qml对象过程详解
2019/09/26 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
2015年化验员工作总结
2015/04/10 职场文书
工程技术员岗位职责
2015/04/11 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
Win11 BitLocker 驱动器加密
2022/04/19 数码科技