javascript 手动给表增加数据的小例子


Posted in Javascript onJuly 10, 2013

 先建一个页面如下:这里有两个表,上面一个有数据,下面一个没有数据,只有一个表头!
 

 <body>
     <form id="form1" runat="server">
     <div>
     <table border='1px' width="500px" id="tables">
     <tr>
     <td>1</td><td><input type="text" value="20"  style="width:50px" /><input type="text" value="200"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="but" value="新增" onclick="butd(this);" /></td>
     </tr>
      <tr>
      <td>2</td><td><input type="text" value="30"style="width:50px" /><input type="text" value="300"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button1" value="新增" onclick="butd(this);" /></td>
      </tr>
       <tr>
        <td>3</td><td><input type="text" value="40" style="width:50px" /><input type="text" value="400" style="width:50px"/></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button2" value="新增" onclick="butd(this);" /></td>
       </tr>
        <tr>
      <td>4</td><td><input type="text" value="50" style="width:50px" /><input type="text" value="500"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button3" value="新增" onclick="butd(this);" /></td>
        </tr>
         <tr>
        <td>5</td><td><input type="text" value="60" style="width:50px" /><input type="text" value="600"style="width:50px" /></td><td>我是中国人</td><td>好好学习</td><td><input type="button" id="Button4" value="新增" onclick="butd(this);" /></td>
         </tr>
     </table>
     </div>
     <div>
       <table border='1px' width="500px" id="table2">
       <tr><td>ID</td><td>年龄</td><td>金钱</td><td>名字</td></tr>
       </table>
     </div>
     </form>
 </body>

现在点击新增按钮,把点中的当前行的数据动态的加到下面的TABLE中,javascipt代码如下:
<script type="text/javascript">
        function butd(rows) {
            var rows = rows.parentNode.parentNode.rowIndex    //找到当前选中的行
            var mytable = document.getElementById('tables');  //找到当前这个 table;
            var Romm_price = mytable.rows[rows].cells[0].innerText; //找到当前行的第一列的值
            var room_rows = mytable.rows[rows].cells[1].children[0].value; //找到当前行的第二列第一个文本框的值;
            var room_rows2 = mytable.rows[rows].cells[1].children[1].value; //找到当前行的第二列第二个文本框的值;
            var room_rows3 = mytable.rows[rows].cells[2].innerText; //找到当前行的第三列的值;
            //找到table2,并给table2新增一行
            var x = document.getElementById('table2').insertRow();
            x.align = "center";  //设置行样式
            var Romm_typename = x.insertCell(0);
            var txtDate = x.insertCell(1);
            var Guest_Type_ID = x.insertCell(2);
            var room_row = x.insertCell(3);
            Romm_typename.innerHTML = Romm_price;
            txtDate.innerHTML = room_rows;
            Guest_Type_ID.innerHTML = room_rows2;
            room_row.innerHTML = room_rows3;
        }
    </script>

这个里面最重要的就是如何得到当前你点击是哪行,然后是如何手动的把当前行的数据加到table中!
Javascript 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
基于javascript 闭包基础分享
Jul 10 #Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 #Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 #Javascript
浅析js封装和作用域
Jul 09 #Javascript
js正则表达式的使用详解
Jul 09 #Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 #Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 #Javascript
You might like
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
JavaScript 调试器简介
2009/02/21 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python中GIL的使用详解
2018/10/03 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
社区居务公开实施方案
2014/03/27 职场文书
见义勇为事迹材料
2014/12/24 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年企业工作总结范文
2015/04/28 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
导游词之河北邯郸
2019/09/12 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电