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 相关文章推荐
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
js select实现省市区联动选择
Apr 17 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
php生成WAP页面
2006/10/09 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
PyQt5实现简单的计算器
2020/05/30 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
会计自我鉴定范文
2013/10/06 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
公司晚会主持词
2019/04/17 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python