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删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
vue监听键盘事件的相关总结
Jan 29 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
网络工程师职业规划
2014/02/10 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
2014年教师节寄语
2014/04/03 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
公务员政审材料
2014/12/23 职场文书
房地产项目合作意向书
2015/05/08 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python