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 相关文章推荐
js防止表单重复提交的两种方法
Sep 30 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
javascript中 try catch用法
Aug 16 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
详解JavaScript 的变量
Mar 08 Javascript
jquery实现聊天机器人
Feb 08 jQuery
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
基于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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
jQuery 联动日历实现代码
2012/05/31 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
详解Python中for循环的使用
2015/04/14 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python如何支持并发方法详解
2020/07/25 Python
Python reques接口测试框架实现代码
2020/07/28 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
小饰品店的创业计划书范文
2013/12/28 职场文书
社区居务公开实施方案
2014/03/27 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
MySQL如何构建数据表索引
2021/05/13 MySQL
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis