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 split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 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中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
php可变长参数处理函数详解
2017/02/22 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python 统计代码行数简单实例
2017/05/04 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python如何生成树形图案
2018/01/03 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
意大利男装网店:Vrients
2019/05/02 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
奥巴马演讲稿
2014/01/08 职场文书
毕业设计计划书
2014/01/09 职场文书
企业党员公开承诺书
2014/03/26 职场文书
出生公证委托书
2014/04/03 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
晚会开场白和结束语
2015/05/29 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
mysql序号rownum行号实现方式
2022/12/24 MySQL