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自动打开页面上链接的实现代码
Sep 25 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
Node.js的特点详解
Feb 03 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
最新最全的手机号验证正则表达式
Feb 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python通过future处理并发问题
2017/10/17 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
给排水专业应届生求职信
2013/10/12 职场文书
大学生军训广播稿
2014/01/24 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
2014年教师节寄语
2014/04/03 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
小学教师节活动总结
2015/03/20 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
七年级数学教学反思
2016/02/17 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS