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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
javascript实现获取字符串hash值
May 10 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 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
DISCUZ 分页代码
2007/01/02 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
php正则修正符用法实例详解
2016/12/29 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
理解javascript正则表达式
2016/03/08 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python 实现识别图片上的数字
2019/07/30 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python Xpath语法的使用
2020/11/26 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
2014年道德讲堂实施方案
2014/03/05 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
计生个人工作总结
2015/02/28 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
pytorch中的 .view()函数的用法介绍
2022/03/17 Python