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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 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 join函数应用
2011/05/04 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
php链表用法实例分析
2015/07/09 PHP
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python打开网页和暂停实例
2014/09/30 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
就业意向书范文
2014/04/01 职场文书
市场总经理岗位职责
2014/04/11 职场文书
小学开学标语
2014/07/01 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2014年质量工作总结
2014/11/22 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python