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 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 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通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
微信小程序 同步请求授权的详解
2017/08/04 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
Python常用库推荐
2016/12/04 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
法学研究生自我鉴定范文
2013/12/04 职场文书
美术教师自我鉴定
2014/02/12 职场文书
篝火晚会主持词
2014/03/25 职场文书
家装业务员岗位职责
2015/04/03 职场文书
Python Django项目和应用的创建详解
2021/11/27 Python
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL