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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
不懂JavaScript应该怎样学
Apr 16 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
vue引入Excel表格插件的方法
Apr 28 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
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php 定义404页面的实现代码
2012/11/19 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
js实现秒表计时器
2019/12/16 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
opencv与numpy的图像基本操作
2019/03/08 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
深圳茁壮笔试题
2015/05/28 面试题
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
承诺书格式范文
2014/06/03 职场文书
单位委托书怎么写
2014/08/02 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
公司员工离职证明书
2014/10/04 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书