js实现对table动态添加、删除和更新的方法


Posted in Javascript onFebruary 10, 2015

本文实例讲述了js实现对table动态添加、删除和更新的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>表格操作</title>  

<style type="text/css">  

body {  

   font-size: 13px;  

   line-height: 25px;  

}  

table {  

    border-top: 1px solid #333;  

    border-bottom: 1px solid #333;  

    width: 300px;  

}  

td {  

    border-right: 1px solid #333;  

    border-bottom: 1px solid #333;  

}  

.title {  

    text-align: center;  

    font-weight: bold;  

    background: #ccc;  

}  

.center {  

    text-align: center;  

}  

#displayInfo {  

    color: red;  

}  

</style>  

<script type="text/javascript">  

   function addRow() { //增加一行  

       var tableObj = document.getElementById('myTable');  

       var rowNums = tableObj.rows.length;  

       var newRow = tableObj.insertRow(rowNums);  

       var col1 = newRow.insertCell(0);  

       col1.innerHTML = "幸福从天而降";  

       var col2 = newRow.insertCell(1);  

       col2.innerHTML = "$18.5";  

       col2.align = "center";  

       var divInfo = document.getElementById('displayInfo');  

       divInfo.innerHTML = "添加商品成功";  

   }  

   function delRow() {  //删除第二行  

       document.getElementById('myTable').deleteRow(1);  

       var divInfo = document.getElementById('displayInfo');  

       divInfo.innerHTML = "删除商品成功";  

   }  

   function updateRow() {  //更新行的信息  

       var uRow = document.getElementById('myTable').rows[0];  

       uRow.className = "title";  

   }  

</script>  

</head>  

<body>  

<table border="0" cellpadding="0" cellspacing="0" id="mytable">  

   <tr id="row1">  

       <td>书名</td>  

       <td>价格</td>  

   </tr>  

   <tr id="row2">  

       <td>看得见风景的房间</td>  

       <td class="center">$30.00</td>  

   </tr>  

    <tr id="row3">  

       <td>60个瞬间</td>  

       <td class="center">$32.00</td>  

   </tr>  

</table>  

<input name="b1" type="button" value="增加一行" onclick="javascript:addRow();"/><br />  

<input name="b2" type="button" value="删除第二行" onclick="javascript:delRow();"/><br />  

<input name="b3" type="button" value="修改标题" onclick="javascript:updateRow();"/><br />  

<div id="displayInfo"></div>  

</body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
js+css实现导航效果实例
Feb 10 #Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 #Javascript
jquery中EasyUI使用技巧小结
Feb 10 #Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 #Javascript
JavaScript中的标签语句用法分析
Feb 10 #Javascript
jquery动态添加删除(tr/td)
Feb 09 #Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 #Javascript
You might like
php的curl封装类用法实例
2014/11/07 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
python模拟实现分发扑克牌
2020/04/22 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Java和Javasciprt的区别
2012/09/02 面试题
大学生的创业计划书就该这么写
2014/01/30 职场文书
护士毕业实习感言
2014/03/05 职场文书
初中信息技术教学计划
2015/01/22 职场文书
检讨书模板
2015/01/29 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
田径运动会通讯稿
2015/07/18 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
react antd实现动态增减表单
2021/06/03 Javascript