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.js 的时候应该特别注意的几个问题.
Apr 12 Javascript
Javascript的一种模块模式
Mar 22 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 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/03 新手入门
php抓取https的内容的代码
2010/04/06 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
JS高级运动实例分析
2016/12/20 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
python中黄金分割法实现方法
2015/05/06 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
关于python写入文件自动换行的问题
2018/06/23 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
四好少年事迹材料
2014/01/12 职场文书
Python之基础函数案例详解
2021/08/30 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android